选项卡面板内的 extjs 视口答案

【问题标题】：extjs viewport inside tabpanel选项卡面板内的 extjs 视口
【发布时间】：2013-07-21 01:55:38
【问题描述】：

美好的一天，我是 extjs 新手，我正在使用 extjs 3，我的布局有问题，我有选项卡面板，选项卡 1 内部将是视口，选项卡 2 只是一个简单的内容，但是当我单击 tab2 时，视口不会消失，应该是视口仅在选项卡 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

    }

});

【问题讨论】：

标签： javascript extjs viewport tabpanel

【解决方案1】：

视口是代表整个浏览器窗口的特殊容器。他们总是将自己呈现给身体，使他们成为进入其他事物的不良候选人。您应该尝试使用panel 或container 而不是视口。

【讨论】：

【解决方案2】：

您可能正在寻找选项卡 1 内的边框布局，类似于 Windows with Layouts example。
视口绑定到浏览器窗口，因此无法隐藏。

【讨论】：