「app/store/」に「menu1.js」、「menu2.js」などのメニュー ツリー ストアがいくつかあります。私の Web ページでは、上部の領域にナビゲーション バーがあり、左側の領域にあるメニュー ツリーを制御してメニューを変更するための多くのボタンがあります。しかし、このツリーパネルでストアを変更する方法がわかりません。これが私のコードです：
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 }
]
}]
}
});
アプリ/ストア/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();
}
});
アプリ/コントローラー/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');
}
}
});