Ext.tab.Panel and flex

[matfin]

Hi there,

I have a Tab Panel defined as follows:

var mainpanel = Ext.define("Application.view.Main", {
    extend: 'Ext.tab.Panel',
    xtype: 'mainpanel',
    config: {
        fullscreen: true,
        layout: {
            animation: 'fade'
        },
        tabBarPosition: 'left',
        items: [
            {
                xtype: 'homepanel'
            },
            {
                xtype: 'placespanel'
            },
            {
                xtype: 'topicspanel'
            },
            {
                xtype: 'socialpanel'
            },
            {
                xtype: 'settingspanel'
            }
        ]
    }
});

What I want to do is make the height of each tab within it flush with the height of the screen so that theu are each 20% of the total height, so with different devices we have no gaps at the bottom of the screen or the Tabs don't get cut off.

Is it possible to do this and if so, how can it be done ?

Thanks,

Matt

[mitchellsimoens]

Try this:

Ext.define('Application.view.Main', {
    extend : 'Ext.tab.Panel',
    xtype  : 'mainpanel',

    config : {
        fullscreen : true,
        layout     : {
            type      : 'card',
            animation : 'fade'
        },
        tabBar     : {
            docked   : 'left',
            defaults : {
                flex  : 1
            }
        },
        items      : [
            {
                xtype : 'homepanel'
            },
            {
                xtype : 'placespanel'
            },
            {
                xtype : 'topicspanel'
            },
            {
                xtype : 'socialpanel'
            },
            {
                xtype : 'settingspanel'
            }
        ]
    }
});

[matfin]

Yes, that worked!

Thank you very much