Question

我正在使用extjs 4.1并尝试进行事件委托，在我的情况下是将模糊事件附加到我的表单的所有文本字段并且它不起作用我也没有在firebug中收到任何错误，我不知道不知道我在附加事件时出错了，是不是我把代码放在了错误的地方，而且我已经注意到按照下面的文档链接：

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

options对象的delegate属性不再存在。以下是我的代码：

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

ExtJS 4.1事件委派无法正常工作

1 个答案: