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

时间:2017-04-28 15:29:54

标签: extjs layout tabpanel

在我的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',
}

1 个答案:

答案 0 :(得分:1)

您的问题不是标签面板。默认情况下,tabpanel已设置为layout:'fit'

这是包含tabpanel的面板。您还应该为其提供fit布局,以便Tabpanel的大小可以填充面板。

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