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