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

Question

我正在尝试使用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(); 
    } 
}); 

应用程序/商店/ 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} 
        ] 
       } 
      ] 
     } 
}); 

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

我想与菜单进行交互。但是这行代码不起作用。 最后，'refs'是模糊的。你能给我一些解决方案

Answer 1

尝试将控制器注册到TreePanel中：

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