extjs4.1 - 在 extjs4 mvc Controller 中捕获工具栏项目事件

Question

我想通过引用从 DistrictMap Controller 的 mapPanel 工具栏中选择“绘制多边形”按钮，为此我在 DistrictMap Controller 中使用下面的选择器!但它不起作用，我在控制台中看到未定义!

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'对于选择器，但它不起作用!也适用于 #polygonButton为什么选择器不能选择工具栏项目？虽然如果我只使用 ID #polygonButton在选择器中!

Answer 1

在上述问题中，由于 DistrictPanel View 未加载，因此选择器无法在 mapPanel 工具栏中选择多边形按钮来解决此问题，您应该使用 Controller onLaunch函数代替 init功能。所以固定代码是:

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());
}