Extjs4 当用户单击按钮时打开选项卡面板

我有一个

窗口

，当我点击一个按钮时，我会弹出打开它（作为

弹出窗口

）。这是我的代码，它工作得很好

var w= Ext.widget('mywindow');
w.show();

现在，我有一个

选项卡栏面板

，当用户单击按钮时，我需要打开它（，但不是作为弹出窗口）。它应该占据整个屏幕（替换以前的视图）。我该怎么做

“我的选项卡”面板的定义

Ext.define('App.view.TabPanelClass', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.persontabpanel',
    .....

更新

launch: function() {   

        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [
            {
                xtype: 'panel', 
                items: { xtype: 'firstPanel' }

            },....

---

可以使用卡片布局将一个视图替换为另一个视图。或者，您可以使用maximized:true配置创建一个窗口

通常的方法是将选项卡面板放在视口中，并为其提供一个

布局：“card”

config以覆盖任何其他视图，如果这是视口中唯一的视图，则

布局：“fit”

config会工作得更好。窗口不是ExtJS视口的子对象，因此窗口和选项卡面板在视口中只能是一个项目

---

视口将保持其内容大小与浏览器窗口大小相匹配，即使在调整其大小时也是如此。查看viewport上的文档。

有人知道如何解决此问题吗？我已在

launch:function（）

中创建了我的视口。如何使所有内容适合浏览器？@sharonHwk为内容的顶部组件提供一个

布局：“fit”

配置，并将该顶部组件包含在

视口
项目
数组中。
最大化：true
做什么？它会调整窗口内容的大小以适应浏览器吗？