javascript - EXTJS 选项卡面板使选项卡拉伸以填充面板

Question

我遇到的问题是我无法在 extjs 选项卡面板上获取我的选项卡来填充面板的整个宽度。我已经尝试调用 resizeTabs 但还没有找到这个问题的答案提前谢谢。

Answer 1

在您的 tabpanel 配置中，添加以下 tabBar 配置：

        tabBar: {
            defaults: {
                flex: 1
            },
            dock: 'top',
            layout: {
                pack: 'center'
            }
        }

Answer 2

将“layout:fit”添加到各个面板的配置中。

var tabs = new Ext.TabPanel({
    items: [{
        title: 'Tab 1',
        html: 'A simple tab',
        layout: 'fit'
    },{
        title: 'Tab 2',
        html: 'Another one',
        layout: 'fit'
    }]
});

或者对于 DRYer 方法，如果您希望所有面板都具有“适合”布局，请使用 TabPanel 的“默认”配置选项：

var tabs = new Ext.TabPanel({
    defaults: {
        layout: 'fit'
    },
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});