2012-07-02 4 views
0

Я использую extjs 4.1 и пытаюсь выполнить делегирование события, которое в моем случае должно прикрепить событие размытия ко всем текстовым полям моей формы, и оно не работает, и я не получаю никакой ошибки в поджигатель тоже я не знаю, где я буду неправильно в придании события, это неподходящее место, где я ставлю код, а также я заметил, что в соответствии с Документами ниже ссылки:Ошибка делегирования события 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' 
          } 
         ); 
      } 
     } 


    }); 


}); 

ответ

0

Начнем с того, метод on не принимает delegate в качестве параметра, так что линия совершенно не нужна.

Затем, в вашем случае, вы можете использовать только formCmp.on(), а не Ext.getCmp().on().

Наконец, вы хотите размытие события на каждом поле, а не на самой форме. Следующий код должен работать:

+2

Я не уверен, что такое правильный ответ, но я не думаю, что это можно квалифицировать как использование «делегирования событий», поскольку он прикрепляет слушателя к каждому полю. Если я не ошибаюсь, передача события включает присоединение слушателя к одному элементу, а затем обработку нескольких событий от его потомков. – Mark

+0

Событие делегирования происходит на уровне объекта (экземпляра) не класса (определения), поэтому он не имеет ничего общего с потомками. Делегирование означает, что вместо экземпляра X, связанного с уведомлением, экземпляр Y будет. – Izhaki

+1

Я говорил о потомках, как в DOM, а не о объектно-ориентированном наследовании. – Mark

Смежные вопросы