怎样实现extAPI那种点击左边树后，右边的panel代替下一个panel

var a = {
    addTab : function(_name, _id, _css, _link) {
        // 动态创建tab标签的id
        var tabId = 'tab_' + _id;
        // 动态创建tab标签的标题
        var tabTitle = _name;
        // 动态获取tree的某个节点的链接
        var tabLink = _link;
        // 获取主tab组件
        var centerPanel = Ext.getCmp('MainTab');
        // 根据id获取centerPanel组件的直接子组件的引用
        var tab = centerPanel.getComponent(tabId);
        // 这个要传到load页去，很关键，以后的布局要靠它
        var subMainId = 'tab_' + _id + '_main';
        
        //如果存在第0个元素 先将它的activate事件去掉 
            if (centerPanel.items) {
                var fistpanel = centerPanel.items.get(0);
                if (fistpanel) {
                    fistpanel.removeListener("activate", this.onActiveTabSize);
                }
            }
            centerPanel.removeAll(); //此处删掉TabPanel中的Panel
        /**
         * 如果可以获取到tab页,就不用再次添加tab页了 (获取不到时tab=undefined)
         * (也就是说如果当前tab页已经渲染就不用再次添加该tab了)
         */
        if (!tab) {
            
            // 动态创建tab
            var newTab = centerPanel.add(new Ext.Panel({
                        id : tabId, // tab的唯一id
                        title : tabTitle, // tab的标题
                        iconCls : 'project-treeNodeLeafIcon', // 图片
                        layout : 'fit', // 填充布局,它不会让load进来的东西改变大小
                        border : false, // 无边框
                        closable : true, // 有关闭选项卡按钮
                        listeners : {
                            // 侦听tab页被激活里触发的动作
                            activate : this.onActiveTabSize,
                            scope : this
                        }
                    }));

            // 激活加入的tab页(将新创建的tab页获取焦点)
            centerPanel.setActiveTab(newTab);

            newTab.load({
                url : tabLink, // 请求服务器的地址
                method : 'post', // post请求方式
                params : {
                    // 这里是关键的一个参数，传给load页，布局的关键
                    subMainId : subMainId
                },
                scope : this, // 范围
                discardUrl : true, // 丢弃url
                nocache : true, // 不缓存
                text : '加载中,请稍候……',
                timeout : 3000, // 延时3秒
                scripts : true
                    // 允许执行script
                });
        } else {
            // 激活已存在的tab页
            centerPanel.setActiveTab(tab);
        }
    },

    /**
     * 激活TAB页时改变内部容器的大小
     */
    onActiveTabSize : function() {
        // 获取当前活动的tab页的body元素的宽度 (不含任何框架元素)
        var w = Ext.getCmp('MainTab').getActiveTab().getInnerWidth();
        // 获取当前活动的tab页的body元素的高度 (不含任何框架元素)
        var h = Ext.getCmp('MainTab').getActiveTab().getInnerHeight();
        // 获取当活动的tab页的id
        var Atab = Ext.getCmp('MainTab').getActiveTab().id;

        // 获取组件
        var submain = Ext.getCmp(Atab + '_main');

        if (submain) {
            submain.setWidth(w);
            submain.setHeight(h);
        }
    }
}