Classes with custom events

Here’s an example of a pre-configured class that fires a custom event, and code that then listens for the event:

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();

    MyForm = Ext.extend(Ext.form.FormPanel, {
        id: 'simpleForm',
        title: 'Simple Form',
        frame: true,
        width: 300,
        initComponent: function(){
            Ext.apply(this, {
                renderTo: Ext.getBody(),
                items: [new Ext.Button({
                    id: 'theButton',
                    text: 'Test',
                    listeners: {
                        'click': {

                        // this 'scope' value is CRITICAL so that the event is fired in 
                        // the scope of the component, not the anonymous function...

                            scope: this,        

                            fn: function(field, newVal, oldVal){
                                console.log("custom_event fired");
                                this.fireEvent('custom_event');
                            }
                        }
                    }
                })]
            });
            MyForm.superclass.initComponent.apply(this, arguments);


          // This 'addEvents' call does not seem to be technically required, but most 
          // of the ExtJS examples use it, and it provides a good way of documenting 
          // which events your class fires.

            this.addEvents('custom_event');
        }
    });




    // Create an instance of the form, and listen for the event...

    var simple = new MyForm({});

    simple.on('custom_event', function(){
        console.log("custom event received!");
    });
});