ext左侧树形菜单交替的实现

进入页面默认画面，如下图

点击组织按钮，左侧树形菜单被改变，如下图

再次点击代理店按钮，再次发生变化，如下图

实现的结构如下：

实现的代码如下：
ViewPort代码

Ext.define('MyApp.view.MainVP', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.mainvp',

    requires: [
        'Ext.toolbar.Toolbar',
        'Ext.button.Button',
        'Ext.tree.Panel',
        'Ext.tree.View'
    ],

    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'north',
                    height: 115,
                    itemId: 'topPanel',
                    title: '网站工具栏',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'bottom',
                            itemId: 'topToolBar',
                            items: [
                                {
                                    xtype: 'button',
                                    itemId: 'agentBTN',
                                    text: '代理店'
                                },
                                {
                                    xtype: 'button',
                                    itemId: 'orgBTN',
                                    text: '组织'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    itemId: 'leftTreeMenu',
                    width: 150,
                    title: '导航栏',
                    store: 'LeftAgentStore',
                    viewConfig: {

                    }
                },
                {
                    xtype: 'treepanel',
                    region: 'west',
                    hidden: true,
                    itemId: 'leftOrgMenu',
                    width: 150,
                    title: '英格拉姆',
                    store: 'LeftOrgStore',
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }

});

预计被另一个菜单按钮点击所弹出的window页面，这里并没有调用只是把代码罗列出来

Ext.define('MyApp.view.addNewCar', {
    extend: 'Ext.window.Window',
    alias: 'widget.addnewcar',

    requires: [
        'Ext.form.field.Text',
        'Ext.panel.Panel'
    ],

    height: 610,
    itemId: 'newCar',
    width: 628,
    title: '新增车型',
    modal: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: '产品',
                    emptyText: 'JSB_TESTLIB'
                },
                {
                    xtype: 'panel',
                    frame: true,
                    resizable: true,
                    collapsible: true,
                    title: '属性'
                }
            ]
        });

        me.callParent(arguments);
    }

});

第一棵树的store

Ext.define('MyApp.store.LeftAgentStore', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'LeftAgentStore',
            root: {
                text: '产品',
                expanded: true,
                children: [
                    {
                        text: 'Honda',
                        expanded: true,
                        children: [
                            {
                                text: '雅阁',
                                leaf: true
                            },
                            {
                                text: '思域',
                                leaf: true
                            }
                        ]
                    },
                    {
                        text: 'Benz',
                        expanded: true,
                        children: [
                            {
                                text: 'S系列',
                                leaf: true
                            },
                            {
                                text: 'C系列',
                                leaf: true
                            }
                        ]
                    }
                ]
            },
            fields: [
                {
                    name: 'text'
                }
            ]
        }, cfg)]);
    }
});

第二颗树的store

Ext.define('MyApp.store.LeftOrgStore', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'LeftOrgStore',
            root: {
                text: '组织',
                expanded: true,
                children: [
                    {
                        text: '用户',
                        leaf: true
                    },
                    {
                        text: '角色',
                        leaf: true
                    },
                    {
                        text: '实用程序',
                        leaf: true
                    }
                ]
            },
            fields: [
                {
                    name: 'text'
                }
            ]
        }, cfg)]);
    }
});

controller

Ext.define('MyApp.controller.TopController', {
    extend: 'Ext.app.Controller',

    refs: [
        {
            ref: 'leftTreeMenuRef',
            selector: 'mainvp #leftTreeMenu'
        },
        {
            ref: 'leftOrgMenuRef',
            selector: 'mainvp #leftOrgMenu'
        }
    ],

    agentBTNFunction: function(target) {

        //var carabc = Ext.create("widget.addnewcar");

        //carabc.show();
        var leftAgent = this.getLeftTreeMenuRef(),
        leftOrg = this.getLeftOrgMenuRef();

        leftAgent.show();
        leftOrg.hide();


    },

    orgBTNFunction: function(target) {
                var leftAgent = this.getLeftTreeMenuRef(),
                leftOrg = this.getLeftOrgMenuRef();

                leftAgent.hide();
                leftOrg.show();
    },

    init: function(application) {
        this.control({
            "mainvp #agentBTN": {
                click: this.agentBTNFunction
            },
            "mainvp #orgBTN": {
                click: this.orgBTNFunction
            }
        });
    }

});

结束