Enabling event bubbling for all items in a class

| | Comments (0)

There doesn't seem to be direct way in ExtJS to indicate that all items in a class should bubble events. Below is simple workaround - we iterate over all the items in the class in the 'afterRender' event:


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

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


        FP = Ext.extend(Ext.form.FormPanel, {
                    frame: true,

                    initComponent: function() {
                        var config = {
                            items: [{
                                        xtype: 'textfield',
                                        name: 'First',
                                        fieldLabel: 'First'
                                    }, {
                                        xtype: 'textfield',
                                        name: 'Second',
                                        fieldLabel: 'Second'
                                    }]
                        };

                        Ext.apply(this, Ext.apply(this.initialConfig, config));
                        FP.superclass.initComponent.apply(this, arguments);

                        this.on('change', function(field, newVal, oldVal) {
                                    console.log('form change event on ' + field.name);
                                }, this);
                    },


                    // When the form has been rendered, we step though all the items on 
                    // the form and enable bubbling for each one. In a more complex form
                    // we would need to check the type of each item and enable the right
                    // kind of events, of course.

                    afterRender: function() {
                        FP.superclass.afterRender.apply(this, arguments);
                        Ext.each(this.items.items, function(item) {
                                    item.enableBubble('change');
                                }, this);
                    }
                });


        var fp = new FP();
        var win = new Ext.Window({
                    items: [fp]
                });
        win.show();
    });

Leave a comment

About this Entry

This page contains a single entry by Bill Hutten published on November 3, 2009 9:14 AM.

Complex objects in classes (Ext3 & Ext4 examples) was the previous entry in this blog.

How to manually customize Firebug 1.5.0 for widescreen use is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Pages

Powered by Movable Type 4.34-en