extjs tabpanel ...拉伸内容以垂直填充屏幕？

Question

在我的 extjs 6.0.0.640 面板中，我有一个选项卡面板。在选项卡面板内，我有 2 个网格。如何垂直拉伸网格以适合选项卡面板？基本上拉伸高度以垂直填充？

项目代码

Ext.define('ExtApplication4.view.performance.Performance', {
extend: 'Ext.panel.Panel',

xtype: 'app-performance',
controller: 'performance',
itemId: 'performanceItemId',

requires: [
    'ExtApplication4.view.performance.PerformanceController',
    'ExtApplication4.util.GlobalVar',
    'Ext.chart.axis.Category',
    'Ext.chart.axis.Numeric',
    'Ext.chart.series.Line',
    'Ext.chart.series.Area'
],

title: 'Performance',

layout: {
    type: 'fit'
},

items: [
    {
        xtype: 'tabpanel',
        itemId: 'tabPanelId',
        activeTab: 0,
        //flex: 1,
        //height: '100%',
        items: [
            {
                title: 'Portfolio Level',
                //layout: {
                //    type: 'vbox'
                //},
                items: [
                    {
                        xtype: 'grid',
                        title: 'Portfolio Level',
                        itemId: 'performancePortfolioLevelGridID',
                        bind: {
                            store: '{myPortfolioPerformanceStore}'
                        },
                        margin: '10px 0px 10px 0px',
                        ui: 'featuredpanel-framed',
                        cls: 'custom-gridPerformance',
                        //height: 500,
                        flex: 1,
                        width: 975,
                        collapsible: false,
                        listeners: {
                            itemClick: 'onAccountClick'
                        },
                        features: [{
                            ftype: 'summary',
                            dock: 'bottom'
                        }],
columns: columns are here
},
{
                        title: 'Daily Portfolio Equity',
                        width: 975,
                        //height: 300,
                        flex: 1,
                        ui: 'featuredpanel-framed',
                        margin: '10px 0px 10px 0px',
                        xtype: 'chart',
                        theme: 'awesome2',
                        interactions: 'itemhighlight',
}

Answer 1

您的问题不在于标签面板。默认情况下，选项卡面板已设置为 layout:'fit'。

这是包含选项卡面板的面板。您还应该为其提供 fit 布局，以便调整选项卡面板的大小以填充面板。

    Ext.create({
        xtype: 'panel',
        layout: 'fit'

extjs tabpanel ...拉伸内容以垂直填充屏幕？

extjs tabpanel... stretch contents to fill screen vertically?

extjs

layout

tabpanel