Question

我想在DistrictMap控制器的mapPanel工具栏中通过refs选择Draw Polygon按钮为此目的我在DistrictMap控制器中使用下面的选择器！但它不起作用，我在控制台中看到未定义！

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

在上面的问题中因为没有加载sectionPanel视图所以选择器不能在mapPanel工具栏中选择polygonButton来修复这个问题，你应该使用控制器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());
}

Answer 2

您的选择器意味着FM.view.MapPanel的xtype为mapPanel。是真的吗？

另外不要忘记控制器参考和控制选择器只是组件选择器。您可以在浏览器中打开控制台，并使用Ext.ComponentQuery.query()尝试不同的选择器。

在extjs4 mvc控制器中捕获工具栏项事件

2 个答案: