我在'app / store /'中有一些菜单树商店，例如'menu1.js'，'menu2.js'。 在我的网页中，我在顶部区域有一个导航栏，有许多按钮来控制左侧区域的菜单树以更改菜单。但我不知道如何在这个树面板中更改商店。 这是我的代码：
应用程序/商店/ 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');
}
}
});
答案 0 :(得分：1)
不幸的是，这是Sencha在很多个月内忽略的错误:(
答案 1 :(得分：0)
您可以在获得商店后在TreePanel上使用reconfigure()方法。这与用于更改网格存储的过程相同。
var store = Ext.getStore('newStore');
var menutree = Ext.getCmp('menutree');
menutree.reconfigure(store);
此处提供完整文档：Ext.Tree.Panel reconfigure method。
注意：文档中有一条注释说明此方法不起作用，但它没有指定ExtJS的版本。您可能必须等待框架的更新版本，然后才能按照文档记录。
答案 2 :(得分：0)
请看这个主题：
根据最新的4.1文档，reconfigure()已删除Ext.tree.Panel。
注意：但是，奇怪的是，调用reconfigure()不会给出错误，这意味着该方法仍然存在，但我无法正常工作，因为它返回另一个错误。
另见4.0评论中的讨论：
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-reconfigure
答案 3 :(得分：0)
我扩展了默认的treestore并编写了如下所示的setStore（）方法。不要假装这是最好的解决方案，但它适用于ExtJS 4.1.1。我相信不需要进行大量更改来支持其他版本。
setStore: function(store) {
var me=this,
view;
view = me.getView();
me.removeManagedListener('beforeload');
me.removeManagedListener('load');
me.store.clearListeners();
me.store.clearManagedListeners();
me.store = store;
if (Ext.isString(me.store)) {
me.store = Ext.StoreMgr.lookup(me.store);
} else if (!me.store || Ext.isObject(me.store) && !me.store.isStore) {
me.store = new Ext.data.TreeStore(Ext.apply({}, me.store || {}, {
root: me.root,
fields: me.fields,
model: me.model,
folderSort: me.folderSort
}));
} else if (me.root) {
me.store = Ext.data.StoreManager.lookup(me.store);
me.store.setRootNode(me.root);
if (me.folderSort !== undefined) {
me.store.folderSort = me.folderSort;
me.store.sort();
}
}
view.store.treeStore = me.store;
view.setRootNode(me.store.getRootNode());
me.mon(me.store, {
scope: me,
rootchange: me.onRootChange,
clear: me.onClear
});
me.relayEvents(me.store, [
/**
* @event beforeload
* @inheritdoc Ext.data.TreeStore#beforeload
*/
'beforeload',
/**
* @event load
* @inheritdoc Ext.data.TreeStore#load
*/
'load'
]);
me.mon(me.store, {
/**
* @event itemappend
* @inheritdoc Ext.data.TreeStore#append
*/
append: me.createRelayer('itemappend'),
/**
* @event itemremove
* @inheritdoc Ext.data.TreeStore#remove
*/
remove: me.createRelayer('itemremove'),
/**
* @event itemmove
* @inheritdoc Ext.data.TreeStore#move
*/
move: me.createRelayer('itemmove', [0, 4]),
/**
* @event iteminsert
* @inheritdoc Ext.data.TreeStore#insert
*/
insert: me.createRelayer('iteminsert'),
/**
* @event beforeitemappend
* @inheritdoc Ext.data.TreeStore#beforeappend
*/
beforeappend: me.createRelayer('beforeitemappend'),
/**
* @event beforeitemremove
* @inheritdoc Ext.data.TreeStore#beforeremove
*/
beforeremove: me.createRelayer('beforeitemremove'),
/**
* @event beforeitemmove
* @inheritdoc Ext.data.TreeStore#beforemove
*/
beforemove: me.createRelayer('beforeitemmove'),
/**
* @event beforeiteminsert
* @inheritdoc Ext.data.TreeStore#beforeinsert
*/
beforeinsert: me.createRelayer('beforeiteminsert'),
/**
* @event itemexpand
* @inheritdoc Ext.data.TreeStore#expand
*/
expand: me.createRelayer('itemexpand', [0, 1]),
/**
* @event itemcollapse
* @inheritdoc Ext.data.TreeStore#collapse
*/
collapse: me.createRelayer('itemcollapse', [0, 1]),
/**
* @event beforeitemexpand
* @inheritdoc Ext.data.TreeStore#beforeexpand
*/
beforeexpand: me.createRelayer('beforeitemexpand', [0, 1]),
/**
* @event beforeitemcollapse
* @inheritdoc Ext.data.TreeStore#beforecollapse
*/
beforecollapse: me.createRelayer('beforeitemcollapse', [0, 1])
});
// If the root is not visible and there is no rootnode defined, then just lets load the store
if (!view.rootVisible && !me.getRootNode()) {
me.setRootNode({
expanded: true
});
}
}