Extjs4 how to change the store in treepanel

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/stor开发者_如何学编程e/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');
        }
    }
});

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

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.

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

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
        });
    }
}