extjs4 mvc 컨트롤러에서 툴바 항목 이벤트 잡기

Question

DistrictMap 컨트롤러의 mapPanel 도구 모음에서 Refs를 통해 Draw Polygon 버튼을 선택하고 싶습니다. 하지만 작동하지 않습니다 및 콘솔에서 정의되지 않은 참조하십시오!

Ext.define('FM.controller.DistrictMap',{ 
extend: 'Ext.app.Controller', 
refs:[ 
    { 
     selector: 'mapPanel toolbar > #polygonButton', 
     ref: 'polygon' 
    } 
], 
init: function(){ 
    this.control({ 
     'mapPanel toolbar > button#polygonButton':{ 
      click: this.drawPolygon() 
     } 
    }); 
}, 
drawPolygon: function(){ 
    console.log(this.getPolygon()); 
} 

아래의 코드를 사용하여 툴바를 mapPanel에 추가하십시오. 선택 위의

Ext.define('FM.view.DistrictPanel',{ 
extend: 'Ext.panel.Panel', 
initComponent: function(){ 
    var map = Ext.create('FM.view.MapPanel',{}); 
    map.setPolygonControl(); 
    map.setModifyControl(); 
    map.setSelectControl(); 
    map.addDocked({ 
      xtype: 'toolbar', 
      dock: 'top', 
      items:[ 
       { 
        xtype: 'button', 
        text: 'Draw Polygon', 
        enableToggle: true, 
        toggleGroup: "draw controls", 
        id: 'polygonButton' 
       } 
      ]}); 

도구 모음 항목을 선택할 수 없습니다! 셀렉터로 'mapPanel toolbar #polygonButton'을 테스트했지만 작동하지 않습니다! too #polygonButton
선택자가 툴바 항목을 선택할 수없는 이유는 무엇입니까? 내가 id를 사용한다면 선택기에서 #polygonButton!

Answer 1

위의 질문에서 districtPanel보기가로드되지 않아 selector가이 문제를 해결하기 위해 mapPanel 도구 모음에서 polygonButton을 선택할 수 없기 때문에 init 대신 컨트롤러 onLaunch 함수를 사용해야합니다. 기능을 onLaunch 컨트롤러로하고 버튼을 얻을 수 districtPanel mapPanel # polygonButton'` '`

Ext.define('FM.controller.DistrictMap',{ 
extend: 'Ext.app.Controller', 
refs:[ 
    { 
     selector: 'districtPanel mapPanel toolbar #polygonButton', 
     ref: 'polygon' 
    } 
], 
onLaunch: function(){ 
    this.control({ 
     'districtPanel mapPanel toolbar #polygonButton':{ 
      click: this.drawPolygon 
     } 
}); 
}, 
drawPolygon: function(){ 
    console.log(this.getPolygon()); 
} 

Answer 2

귀하의 선택자는 FM.view.MapPanel의 xtype이 mapPanel임을 의미합니다. 정말?

또한 컨트롤러 참조 및 컨트롤 선택기가 구성 요소 선택자임을 잊지 마십시오. 브라우저에서 콘솔을 열고 Ext.ComponentQuery.query()으로 다른 선택기를 사용해보십시오.