如何使用控制器来控制extjs4中的菜单

Question

我正在尝试使用 extjs4 MVC 构建 CRM Web 应用程序。 在设计了一个简单的网页后，我尝试使用控制器来控制左侧面板上的菜单。 但控制器对我来说太难理解了。

由于UI设计上的一些原因，菜单树面板的外部有一个面板。

这是我的代码。

app/view/MenuBar.js

Ext.define('Crm.view.MenuBar',{
    extend: "Ext.panel.Panel",
    alias: 'widget.crm_menubar',
    requires: ['Crm.store.Menus'],
    initComponent: function(){
    var store = Ext.create('Crm.store.Menus');
    Ext.apply(this,{
        xtype:'panel',  
        title: "menu"
        width: 212,
        frame:true,
        hideCollapseTool:true,
        split: true,
        collapsible:true,
        collapseMode: 'mini',
        items: [
            Ext.create('Ext.tree.Panel',{
                id: 'menutree',
                border: false,
                height: '100%',
                rootVisible: false,
                store: store
            })
        ]
    });
    this.callParent();
    }
});

app/store/Menus.js

Ext.define('Crm.store.Menus',{
    extend: 'Ext.data.TreeStore',
    root: {
            expanded: true, 
            children: [
                {   text: "subrootitem1",
                    expanded: true,
                    children:[
                    { id: 'a', text: "item1", leaf: true},
                    { id: 'b', text: "item2", leaf: true },
                    ]
                },
                {   text: "subrootitem2", 
                    expanded: true, children: [
                        { id: 'c', text: "item1", leaf: true },
                        { id: 'd', text: "item2", leaf: true}
                    ]
                }
            ]
        }
});

app/controller/Menu.js

Ext.define('Crm.controller.Menu',{
    extend: 'Ext.app.Controller',
    refs: [{ref: 'menubar', selector: 'crm_menubar'}],
    init: function(){
        alert('test'); // this line can already execute when page is loading  
        this.control({
            'crm_menubar': {
                itemmousedown: this.onItemClicked
            }
        });
    },
    onItemClicked: function(){
        alert('clicked');
    }
});

我想与菜单交互。但是这一行的代码不起作用。 最后，“裁判”变得模糊不清。你能给我一些解决方案吗

Answer 1

尝试将您的控制器注册到树面板：

this.control({
    'crm_menubar treepanel[id="menutree"]': {
        itemclick: this.onItemClicked,
        scope : this
    }
});