how to use controller to control menus in extjs4 - model-view-controller

Question

I am trying to build a CRM web application using extjs4 MVC.
After design a simple web page, I try to use controller to control the menu on the left panel.
But the controller is so difficult to understand for me.
Because of some reasons on ui design, there is a panel in the outer of the menu tree panel.
Here is my code.
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');
}
});
I want interact with the menu. But the code up this line do not work.
At last the 'refs' is obscure. Can you give me some solution

Answer 1

Try registering your controller to the treepanel:
this.control({
'crm_menubar treepanel[id="menutree"]': {
itemclick: this.onItemClicked,
scope : this
}
});