ExtJS的4.1事件代表团

Question

我使用ExtJS的4.1和试图做事件委派这在我的情况是一个模糊事件附加到我的表格的所有文本字段和它不工作，我没有得到任何错误不工作在萤火虫也一样，我不知道我在安装时走错了，是我在哪里把代码中的错误的地方，也是我注意到，按照以下链接的文档：

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

的选项代表属性对象不再存在。下面是我的代码：

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

首先，该on方法不带delegate作为参数，使该行是完全没有必要的。

然后，在您的渲染事件中，您可以使用formCmp.on()而不是Ext.getCmp().on()。

最后，你想在每场模糊事件，而不是形式本身。下面的代码应该工作：

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. 
}