ExtJS自动调整大小选项卡面板 [英] ExtJS Auto Resize Tab Panel

问题描述

我们有一个视口，在其中有一个用于导航树的 west region 和一个用于内容(网格，表单等)的 center region .里面的标签面板.

We have a viewport, and inside it we have a west region for navigation tree and a center region for content (grids, forms, etc.) which has a tab panel inside it.

在导航树中的任何子菜单项上单击，我们都会向该选项卡面板动态添加内容(选项卡).

We dynamically add content (tabs) to this tab panel, on click of any sub-menu item in navigation tree.

这些选项卡不会在调整窗口大小时重新调整大小.

These tabs are not re-sized on window re-size.

动态添加标签的功能是:

The function to add tabs dynamically is:

function AddNewTab(title, url, closable) {
    var tabs = Ext.getCmp('tabs');
    tabs.add({
        xtype: 'panel',
        title: title,
        closable: closable,
        autoScroll: true,
        layout: 'fit',
        autoLoad: {
            url: url,
            scripts: true
        }
    });
    tabs.setActiveTab(tabs.items.length - 1);
}

更新: 这是一切正常的正常状态

Update: This is the normal state where every things is OK

但是，当我们调整窗口大小或折叠右面板时，选项卡面板不会重新调整大小以填充整个区域.

But when we resize the window or collapse the right panel, tab panel won't re-size to fill the whole area.

推荐答案

中心区域的布局应为'fit'.

The layout of the center region should be 'fit' .

这篇关于ExtJS自动调整大小选项卡面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！