0

私はextjs4.1を使用していて、イベントの委任を実行しようとしています。この場合、フォームのすべてのテキストフィールドにblurイベントをアタッチしますが、機能せず、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

次に、renderイベント内で、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 に答える