怎样实现extAPI那种点击左边树后，右边的panel代替上一个panel
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';
/**
* 如果可以获取到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);
}
}

该怎样改正？

------解决方案--------------------

JScript code

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