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

options 개체의 대리자 속성이 더 이상 존재하지 않습니다.

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을지지 않습니다, 시작하려면 : 다음은 내 코드입니다.

그런 다음 렌더링 이벤트 내에서 Ext.getCmp().on() 대신 formCmp.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. 
} 
+2

옳은 대답은 확실하지 않지만이 방법은 각 필드에 수신기를 연결하기 때문에 "이벤트 위임"을 사용하는 것으로 간주하지 않습니다. 내가 틀린 것이 아니라면, 이벤트 위임은 하나의 요소에 리스너를 연결 한 다음 그 하위로부터 여러 이벤트를 처리하는 것을 포함합니다. – Mark

+0

이벤트 위임은 클래스 (정의)가 아닌 객체 (인스턴스) 수준에서 발생하므로 하위 항목과 아무 관련이 없습니다. 위임은 인스턴스 X가 알림을 처리하는 대신 인스턴스 Y가 처리한다는 것을 의미합니다. – Izhaki

+1

DOM에서와 마찬가지로 객체 지향 상속과 같은 자손에 대해서 말하고있었습니다. – Mark

관련 문제