如何使用控制器來控制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 
    } 
});