Question

I’m teaching myself extjs and I am working with tabs. I can’t figure out how to resize the whole container, not just the tabs, but where the data for each tab will show…I tried width: 400 but that made no change

Here’s my code so far:

Ext.application({
    name: 'HelloExt',
    launch: function() {

    Ext.require('Ext.container.Viewport');

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{

            xtype: 'tabpanel',
            width: 400,
            activeTab: 0, // index or id
            items:[{
                title: 'Tab 1',
                html: 'This is tab 1 content.'
            },{
                title: 'Tab 2',
                html: 'This is tab 2 content.'
            },{
                title: 'Tab 3',
                html: 'This is tab 3 content.'
            }]

        }]//end of viewport
    });
}
});

Can someone give me a snippet for this? Thanks.

Answer 1

You use layout : ‘fit’ so the tabpanel can’t get width property try layout : ‘form’