Extjs4 wie man den Store im Treepanel ändert

Question

Ich habe einige Menübaum-Stores in 'app/store/', wie 'menu1.js', 'menu2.js'. Auf meiner Webseite habe ich eine Navigationsleiste im oberen Bereich mit vielen Schaltflächen, um den Menübaum im linken Bereich zu steuern und das Menü zu ändern. Aber ich weiß nicht, wie ich den Store in diesem Baum-Panel ändern kann. Hier ist mein 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 (d.h. Ich habe seinen Store nicht gesetzt)

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;   // Ich möchte den Store des Menüs mit Menus1 initialisieren
        //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') { //Wenn Schaltfläche 1 geklickt wird, Menü zu Menus1 ändern
            menustore = Menus1;
            //menustore = Ext.create('Crm.store.Menus1');       
        } else if (btnId == 'btn_menus2') { //Wenn Schaltfläche 2 geklickt wird, Menü zu Menus2 ändern
            menustore = Menus2;
            //menustore = Ext.create('Crm.store.Menus1');
        }
    }
});

Answer 1

Leider ist dies ein Fehler, den Sencha viele, viele Monate lang ignoriert hat :(

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

Answer 2

Sie sollten in der Lage sein, die Methode reconfigure() auf dem TreePanel nach dem Abrufen Ihres Stores zu verwenden. Dies ist der gleiche Vorgang, den Sie verwenden würden, um den Store eines Grids zu ändern.

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

menutree.reconfigure(store);

Vollständige Dokumentation hier: Ext.Tree.Panel reconfigure Methode.

Hinweis: Es gibt einen Kommentar in der Dokumentation, der besagt, dass diese Methode nicht funktioniert, aber es wird keine Version von ExtJS angegeben. Möglicherweise müssen Sie auf eine aktualisierte Version des Frameworks warten, bevor es wie dokumentiert funktioniert.

Answer 3

Bitte siehe diesen Thread:

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

Laut den neuesten 4.1-Dokumenten wurde reconfigure() aus dem Ext.tree.Panel entfernt.

Hinweis: Seltsamerweise wird beim Aufruf von reconfigure() kein Fehler angezeigt, was bedeutet, dass die Methode immer noch vorhanden ist, aber ich kann sie nicht korrekt verwenden, da sie einen anderen Fehler zurückgibt.

Siehe auch die Diskussion in den Kommentaren zu 4.0:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-reconfigure

Answer 4

Ich habe den Standard-Treestore erweitert und die Methode setStore() wie unten geschrieben geschrieben. Tun Sie nicht so, als ob dies die beste Lösung sei, aber sie funktioniert für ExtJS 4.1.1 korrekt. Ich glaube, dass nicht viele Änderungen erforderlich sind, um andere Versionen zu unterstützen.

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

    // Wenn der Root nicht sichtbar ist und kein Root-Knoten definiert ist, laden einfach den Store
    if (!view.rootVisible && !me.getRootNode()) 
    {
        me.setRootNode(
        {
            expanded: true
        });
    }
}