0

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

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'
                            }
                        );
            }
        }


    });


});
4

1 回答 1

0

首先，该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.
}
于 2012-07-02T10:21:23.603 回答