コントローラを使用してextjs4のメニューを制御する方法

Question

extjs4 MVCを使用してCRM Webアプリケーションを構築しようとしています。 シンプルな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 
    } 
});