Extjs4 how to change store in treepanel

Question

I have some menu tree shops in 'app / store /', such as 'menu1.js', 'menu2.js'. On my webpage, I have a navigation bar in the upper area with many buttons to control the menu tree in the left area to change the menu. But I do not know how to change the store on this panel of the tree. 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 (i.e. I do not install 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(); } }); 

Application / 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 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 mistake that Sencha has been ignoring for months :(

http://www.sencha.com/forum/showthread.php?143843-Calling-reconfigure%28%29-on-Ext.tree.Panel-throws-error

Answer 2

After receiving your repository, you can use the reconfigure() method on the TreePanel. This is the same process that you would use to change the grid storage.

 var store = Ext.getStore('newStore'); var menutree = Ext.getCmp('menutree'); menutree.reconfigure(store); 

Full documentation here: Ext.Tree.Panel migration method .

Note. There is a comment in the documentation that this method does not work, but it does not indicate the version of ExtJS. You may need to wait for the updated version of the framework before it is documented.

Answer 3

Please review this topic:

http://www.sencha.com/forum/showthread.php?143843-Calling-reconfigure%28%29-on-Ext.tree.Panel-throws-error

As per recent docs 4.1, reconfigure() been removed from Ext.tree.Panel .

Note. However, strangely enough, the reconfigure() call will not give an error, that is, the method still exists, but I can not get it to work correctly, since it returns another error.

Also see discussion in comments 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 the setStore () method, as shown below. Do not pretend that this is the best solution, but it works correctly for ExtJS 4.1.1. I believe that many changes are not required 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 }); } }