extjs tabpanel… stretch contents to fill screen vertically?

Question

In my extjs 6.0.0.640, in my panel, I have a tab panel.. inside tab panel I have 2 grids. How do I stretch the grids vertically to fit inside the tab panel? basically stretching the height to fill vertically?

PROJECT CODE

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',
}

Alexander Alexander · Accepted Answer · 2017-04-28T15:51:50

Your problem isn't the tabpanel. A tabpanel is already set to layout:'fit' by default.

It's the panel that contains the tabpanel. You should provide it with a fit layout as well, so that the tabpanel is sized to fill the panel.

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

extjs tabpanel… stretch contents to fill screen vertically?

1 Answers