Extjs4 how to change the store in treepanel - model-view-controller

Question

I have some menu tree stores in 'app/store/', such as 'menu1.js' , 'menu2.js'.
In my web page, I have a navigation bar at top region with many buttons to control the menu tree at left region to change the menu. But I do not know how to change the store in this tree panel.
Here is my code:
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 (ie: I do not set its store)
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');
}
}
});

Answer 1

Unfortunately, this is a bug that Sencha has ignored for many, many months :(
http://www.sencha.com/forum/showthread.php?143843-Calling-reconfigure%28%29-on-Ext.tree.Panel-throws-error

Answer 2

You should be able to use the reconfigure() method on the TreePanel after getting your store. This is the same process you would use to change the store of a grid.
var store = Ext.getStore('newStore');
var menutree = Ext.getCmp('menutree');
menutree.reconfigure(store);
Full documentation here: Ext.Tree.Panel reconfigure method.
Note: There is a comment in the documentation stating that this method does not work, but it doesn't specify a version of ExtJS. You may have to wait for an updated version of the framework before it works as documented.

Answer 3

Please see this thread:
http://www.sencha.com/forum/showthread.php?143843-Calling-reconfigure%28%29-on-Ext.tree.Panel-throws-error
According to the latest 4.1 docs, reconfigure() has been removed from the Ext.tree.Panel.
Note: However, strangely enough calling reconfigure() will not give an error, meaning the method still exists, but I can't get it to work correctly as it returns another error.
Also see the discussion in the comments of 4.0:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-reconfigure

Answer 4

I extended the default treestore and wrote setStore() method like below. Do not pretend that this is the best solution, but it works for ExtJS 4.1.1 correctly. I believe do not requires a lot of changes to support other versions.
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
});
}
}