EXTJS tab panel make tabs stretch to fill the panel

Question

The problem i am having is that i cannot get my tabs on an extjs tab panel to fill the entire width of the panel. I have tried calling resizeTabs but have not found an answer to this probelem thanks in advance.

Answer 1

In your tabpanel config, add the following tabBar config:

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

Answer 2

Add a "layout:fit" to the config of your individual panels.

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

Or for a DRYer approach, use the TabPanel's "defaults" config option if you want all the panels to have a "fit" layout:

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