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



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

由于ui设计的原因,在菜单树面板的外部有一个面板。



应用程序/视图/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/存储/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/控制器/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');
    }
});

我想与菜单交互。但是这一行的代码不起作用。最后,"裁判"是模糊的。

尝试将控制器注册到treepanel:

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

最新更新