У меня есть несколько магазинов дерева меню в «app / store /», таких как «menu1.js», «menu2.js».На моей веб-странице у меня есть панель навигации в верхней области со множеством кнопок для управления деревом меню в левой области для изменения меню.Но я не знаю, как изменить магазин в этой панели дерева.Вот мой код:
app / store / Menus1.js
Ext.define('Crm.store.Menus1', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [{
text: "subroot1",
expanded: true,
children:[
{ id: 'item01', text: "item1", leaf: true },
{ id: 'item02', text: "item2", leaf: true },
]
}, {
text: "subroot2",,
expanded: true,
children: [
{ id: 'item03', text: "item3", leaf: true },
{ id: 'item04', text: "item4", leaf: true }
]
}]
}
});
app / store / Menus2.js
Ext.define('Crm.store.Menus2', {
extend: 'Ext.data.TreeStore',
root: {
expanded: true,
children: [{
text: "subroot1",
expanded: true,
children:[
{ id: 'item05', text: "item5", leaf: true },
{ id: 'item06', text: "item6", leaf: true },
]
}, {
text: "subroot2",,
expanded: true,
children: [
{ id: 'item07', text: "item7", leaf: true },
{ id: 'item08', text: "item8", leaf: true }
]
}]
}
});
app / view / MenuBar.js(т.е.: я не устанавливаю его хранилище)
Ext.define('Crm.view.MenuBar', {
extend: "Ext.panel.Panel",
alias:'widget.crm_menubar',
initComponent: function() {
Ext.apply(this, {
id: 'crm-menuBar',
xtype:'panel',
width: 212,
frameHeader:false,
hideCollapseTool:true,
split: true,
collapsible:true,
collapseMode: 'mini',
items: [
Ext.create('Ext.tree.Panel', {
id: 'menutree',
border: false,
margin:'5 4 0 4',
height: '98%',
rootVisible: false,
}),
]
});
this.callParent();
}
});
app / controller / Navi.js
Ext.define('Crm.controller.Navi', {
extend: 'Ext.app.Controller',
requires: [ 'Crm.store.Menus1', 'Crm.store.Menus2' ],
stores: [ 'Menus1'，'Menus2' ],
refs: [
{ ref: 'crm_naviationBar', selector: 'crm_naviationBar' },
{ ref: 'crm_menubar', selector: 'crm_menubar' }
],
init: function(){
var menutree = Ext.getCmp('menutree');
var menustore = menutree.getStore();
menustore = Menus1; // I want initial the menu's store with Menus1
//menustore = Ext.create('Crm.store.Menus1');
this.control({
'button': {
click: this.onItemClicked,
scope: this
}
});
},
onItemClicked: function(btn,eventObj){
var menustore = Ext.getCmp('menutree').getStore();
var btnId = btn.getId();
if (btnId == 'btn_menus1') { //When button1 is clicked, change menu to menus1
menustore = Menus1;
//menustore = Ext.create('Crm.store.Menus1');
} else if (btnId == 'btn_menus2') { //When button2 is clicked, change menu to menus2
menustore = Menus2;
//menustore = Ext.create('Crm.store.Menus1');
}
}
});