Javascript 选项卡面板内的extjs视口

你好，我是extjs新手，我使用的是extjs 3，我的布局有问题，我有选项卡面板，选项卡1的内部是视口，选项卡2只是一个简单的内容，但当我单击选项卡2时，视口不会消失，应该是视口只在选项卡1或第一个选项卡上。下面是我的代码，请帮忙，如果我的代码有问题怎么办

var Tabs;
var chatUi;
var content = "centerpanel";

var viewport1 = new Ext.Viewport({
    //id:       'chatUiLayout',
    layout: 'border',
    //renderTo :    'liveChatTextLiveHelp',
    items: [{
        width: 150,
        region: 'east',
        title: 'east'
    }, {
        region: 'center',
        title: 'center'
    }]
});


Tabs = new Ext.TabPanel({
    id: 'liveChatTextLiveHelp',
    renderTo: 'div-live-chat',
    activeTab: 0,
    //region:       'center',
    //hieght:       200,
    plain: true,
    items: [{
        title: 'Live help',
        items: [ //viewport1  
        ],
        html: "<div id='" + content + "' class='90pers' ></div>"
    }, {
        title: 'Tab 2',
        html: "tab 2 content"
    }

    ],
    scope: this,
    listeners: {
        afterrender: function () {
            viewport1.render(content);
        },
        scope: this

    }

});

var选项卡；
瓦尔·查图伊；
var content=“中心面板”；
var viewport1=新的外部视口({
//id:“chatUiLayout”，
布局：“边框”，
//renderTo:'LiveChatterXtLiveHelp'，
项目：[{
宽度：150，
地区：'东'，
标题：“东方”
}, {
地区：'中心'，
标题：“中心”
}]
});
Tabs=新的Ext.TabPanel({
id:“LiveChatterXtLiveHelp”，
renderTo:“div live chat”，
活动选项卡：0，
//地区：'中心'，
//身高：200，
朴素：没错，
项目：[{
标题：“现场帮助”，
项目：[//视口1
],
html:“
}, {
标题：“表2”，
html：“表2内容”
}
],
范围:本,，
听众：{
afterrender:函数（）{
viewport1.render（内容）；
},
范围：本
}
});

视口是表示整个浏览器窗口的特殊容器。他们总是把自己呈现给身体，这使他们成为进入其他东西的坏候选者。您应该尝试使用

面板

或

容器

，而不是视口。

您可能正在选项卡1内寻找类似的边框布局。
无法隐藏视口，因为它已绑定到浏览器窗口