Question

I am using extjs 4.1 and trying to do the event delegation which in my case is to attach a blur event to all the textfields of my form and it is not working and i am not getting any error in firebug too, i don’t know where i am going wrong in attaching the event, is it the wrong place where i am putting the code and also i have noticed that as per the docs below link:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-method-on

the delegate property of the options object no longer exists. Below is my code:

Ext.onReady(function () {

    var loadForm = function () {
        Ext.getCmp('TestForm').getForm().setValues({ name: 'some text', email: 'first', dob: '12/12/2009' });
    }


    Ext.define('userForm', {
        extend: 'Ext.form.Panel'
            , alias: 'widget.userform'
            , frame: true
          , initComponent: function () {


              Ext.apply(this, {
                  title: 'User Form'
                , height: 350
                , items: [{
                    xtype: 'textfield'
                   , fieldLabel: 'Name'
                   , name: 'name'
                   , id: 'nameId'
                   , enableKeyEvents: true
                }, {
                    xtype: 'textfield'
                   , fieldLabel: 'Email'
                   , name: 'email'
                   , id: 'emailId'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'DOB',
                    id: 'dob',
                    name: 'dob',
                    format: 'Y-m-d'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Age',
                    id: 'age',
                    name: 'age'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Guardian',
                    id: 'guardian',
                    name: 'guardian'
                }]


              });


              this.callParent(arguments);
          } //eoinitComponent


    });


    var userForm = Ext.create('userForm', {
        renderTo: 'loadPanel',
        id: 'TestForm',
        listeners: {
            afterrender: function (formCmp, eOpts) {
                loadForm();
            },
            render: function (formCmp, eOpts) {
                Ext.getCmp("TestForm").on(
                            'blur',
                            function (e, t) {
                                // handle blur
                                console.info(t.id);
                            },
                            this,
                            {
                                // filter the target element to be a descendant with the class '.x-form-field'
                                delegate: '.x-form-field'
                            }
                        );
            }
        }


    });


});

Answer 1

To begin with, the on method does not take delegate as a parameter, so that line is completely unnecessary.

Then, within your render event, you can just use formCmp.on() rather than Ext.getCmp().on().

Lastly, you want blur event on every field, not on the form itself. The following code should work:

render: function (formCmp, eOpts) {
    // For each field.
    formCmp.getForm().getFields().each( function( aField )  {
        // If it's a textfield.
        if ( aField.is('textfield') ) {
            aField.on( 'blur', this.onFieldBlur, this)
        }
    }, this ); // notice the this scope for the each method.
}