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