DOM 요소에서 Ext JS 구성 요소를 얻는 방법

Question

인라인 편집 양식을 만들려고합니다. I는 다음과 같습니다 양식을 가지고 :

컨트롤러는 다음과 같이 (많은 이벤트) 보이는

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>"; 
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>"; 

Ext.define('BM.view.test.Edit', { 
extend: 'Ext.form.Panel', 
alias: 'widget.test-edit', 

layout: 'anchor', 
title: 'Edit Test', 
defaultType: 'displayfield', 

items: [ 
    {name: 'id', hidden: true}, 

    { 
     name: 'name', 
     fieldLabel: 'Name', 
     afterSubTpl: editPic, 
     cls: 'editable' 
    }, 
    { 
     name: 'nameEdit', 
     fieldLabel: 'Name', 
     xtype: 'textfield', 
     hidden: true, 
     cls: 'editMode', 
     allowBlank: false, 
     afterSubTpl: submitPic 
    } 
] 
}); 

:

init: function() { 
    this.control({ 
     'test-edit > displayfield': { 
      afterrender: this.showEditable 
     }, 
     'test-edit': { 
      afterrender: this.formRendered 
     }, 
     'test-edit > field[cls=editMode]': { 
      specialkey: this.editField, 
      blur: this.outOfFocus 
     } 
    }); 
}, 

outOfFocus: function(field, event) { 
    console.log('Lost focus'); 
    this.revertToDisplayField(field); 
}, 

revertToDisplayField: function(field) { 
    field.previousNode().show(); 
    field.hide(); 
}, 

formRendered: function(form) { 
    Ext.get('submitPic').on('click', function (event, object) { 
     var field = Ext.get(object).parent().parent().parent().parent(); 
     var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]'); 
    }); 
}, 

editField: function(field, e) { 
    var value = field.value; 
    if (e.getKey() === e.ENTER) { 
     if (!field.allowBlank && Ext.isEmpty(value)){ 
      console.log('Not permitted!'); 
     } else { 
      var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord(); 
      Ext.Ajax.request({ 
       url: '../webapp/tests/update', 
       method:'Post', 
       params: { 
        id: record.getId(), 
        fieldName: field.name, 
        fieldValue: field.value 
       }, 
       store: record.store, 
       success: function(response, t){ 
        field.previousNode().setValue(value); 
        t.store.reload(); 
        var text = response.responseText; 
        // process server response here 
        console.log('Update successful!'); 
       } 
      }); 

     } 
     this.revertToDisplayField(field); 

    } else if (e.getKey() === e.ESC) { 
     console.log('gave up'); 
     this.revertToDisplayField(field); 
    } 
}, 

showEditable: function(df) { 
    df.getEl().on("click", handleClick, this, df); 

    function handleClick(e, t, df){ 
     e.preventDefault(); 
     var editable = df.nextNode(); 
     editable.setValue(df.getValue()); 
     editable.show(); 
     editable.focus(); 
     df.hide(); 
    } 
}, 

내가 편집 아이콘을 추가하려면 'afterSubTpl'설정을 사용하고을 , 수락 아이콘. 청취자가 관련 클릭 이벤트를 수신하도록 설정했지만 클릭 한 후에 Ext.get ('submitPic')에 의해 생성 된 요소 만 있습니다. 이제 Ext 필드와 양식을 둘러싼 양식에 액세스 할 수 있습니다. 부모 메소드는 다른 DOM 요소 만 반환합니다. 어떻게 연결합니까? formRendered에서 내가 시도한 것을 볼 수 있습니다.

누군가가 나를 위해이 작은 것을 분명히 할 수 있기를 바랍니다. 구성 요소 및 DOM 요소가 동일한 ID (그들은 보통 할) 경우

에게 당신은하지만, ID로 구성 요소를 얻을 수 있습니다

Answer 1

전용 :

Ext.getCmp(yourelement.id) 

을하지만 정확하게 좋은 방법이 아닙니다 - 그것은 것 핸들러 메서드가 이미 구성 요소에 대한 참조를 갖도록 청취자를 설정하는 것이 좋습니다. 예를 들어 'submitPic'구성 요소에서 다음과 같이 클릭 수신기를 정의 할 수 있습니다.

var me = this; 
me.on({ 
    click: function(arguments){ 
     var cmp = me; 
     ... 

});