Model view controller Extjs4如何更改treepanel中的存储

我在“app/store/”中有一些菜单树存储，例如“menu1.js”、“menu2.js”。 在我的网页中，我在顶部区域有一个导航栏，上面有许多按钮，用于控制左侧区域的菜单树以更改菜单。但我不知道如何更改此树面板中的存储。 这是我的密码：

app/store/Menus1.js

Ext.define（'Crm.store.Menus1'{
扩展：“Ext.data.TreeStore”，
根目录：{
对,，
儿童：[{
文本：“subroot1”，
对,，
儿童：[
{id:'item01'，text:'item1'，leaf:true}，
{id:'item02'，text:'item2'，leaf:true}，
]
}, {
文字：“子轴2”，，
对,，
儿童：[
{id:'item03'，text:'item3'，leaf:true}，
{id:'item04'，text:'item4'，leaf:true}
]
}]
}
});

app/store/Menus2.js

Ext.define（'Crm.store.Menus2'{
扩展：“Ext.data.TreeStore”，
根目录：{
对,，
儿童：[{
文本：“subroot1”，
对,，
儿童：[
{id:'item05'，text:'item5'，leaf:true}，
{id:'item06'，text:'item6'，leaf:true}，
]
}, {
文字：“子轴2”，，
对,，
儿童：[
{id:'item07'，text:'item7'，leaf:true}，
{id:'item08'，text:'item8'，leaf:true}
]
}]
}
});

app/view/MenuBar.js（即：我不设置其存储）

Ext.define（'Crm.view.MenuBar'{
扩展：“Ext.panel.panel”，
别名：“widget.crm\u menubar”，
initComponent:function（）{
Ext.apply（本{
id:“crm菜单栏”，
xtype:“面板”，
宽度：212，
frameHeader:false，
hideCollapseTool：没错，
斯普利特：是的，
可折叠的：是的，
collapseMode:'迷你'，
项目：[
Ext.create（'Ext.tree.Panel'{
id:'menutree'，
边界：错，
边距：'5404'，
身高：98%，
rootVisible:false，
}),
]
});
这是callParent（）；
}
});

app/controller/Navi.js

Ext.define（'Crm.controller.Navi'{
扩展：“Ext.app.Controller”，
需要：['Crm.store.Menus1'，'Crm.store.Menus2']，
门店：['Menus1'，'Menus2']，
参考文献：[
{ref:'crm_naviationBar'，选择器：'crm_naviationBar'}，
{ref:'crm_menubar'，选择器：'crm_menubar'}
],
init:function（）{
var menutree=Ext.getCmp（'menutree'）；
var menustore=menutree.getStore（）；
menustore=Menus1；//我想用Menus1初始化菜单的存储
//menustore=Ext.create（'Crm.store.Menus1'）；
这是我的控制({
“按钮”：{
单击：this.com单击，
范围：本
} 
});
},
onItemClicked:函数（btn、eventObj）{
var menustore=Ext.getCmp（'menutree'）.getStore（）；
var btnId=btn.getId（）；
如果（btnId=='btn_menus1'）{//单击按钮1时，将菜单更改为菜单1
menustore=Menus1；
//menustore=Ext.create（'Crm.store.Menus1'）；
}否则，如果（btnId=='btn_menus2'）{//单击按钮2时，将菜单更改为菜单2
menustore=Menus2；
//menustore=Ext.create（'Crm.store.Menus1'）；
}
}
});

在获得店铺后，您应该能够在树面板上使用

重新配置（）

方法。这与更改网格存储的过程相同

var-store=Ext.getStore（'newStore'）；
var menutree=Ext.getCmp（'menutree'）；
菜单项。重新配置（存储）；

此处有完整文档：

---

注意：文档中有一条评论指出此方法不起作用，但它没有指定ExtJS的版本。您可能需要等待框架的更新版本，然后才能按文档所述运行。

不幸的是，Sencha已经忽略了这个bug很多很多个月了：(

---

请查看此线程：

根据最新的4.1文档，

reconfigure（）

已从

Ext.tree.Panel

中删除

注意：然而，奇怪的是，调用

reconfigure（）

不会给出错误，这意味着该方法仍然存在，但我无法让它正常工作，因为它返回另一个错误

另请参见4.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
        });
    }
}