hbox vbox layout issue

[prasanthsd]

Hi guys,

Im trying to build something like this. There is a window inside that a tab panel and on the first tab, I have a border layout. The center region has a few charts and the south region has some data view. Here the vbox containers don't show up unless I give a width to the vboxes. Below is the code

var win = new Ext.Window({
    title: 'Window',
    width: 1024,
    height: 600,
    layout: 'fit',
    items:[{
        xtype: 'tabpanel',
        deferRender: false,
        activeTab: 0,
        items: [{
            title: 'First tab',
            layout: 'border',
            items:[{
                xtype: 'container',
                region: 'center',
                layout: 'hbox',
                layoutConfig: {
                    align: 'stretch',
                    pack: 'center'
                },
                items: [{
                    xtype: 'container',
                    layout: 'vbox',
                    flex: 1,
                    layoutConfig: {
                        align: 'stretch',
                        padding: '5'
                    },
                    items: [{
                        xtype: 'linechart'
                    },{
                        xtype: 'label',
                        height: 10,
                        text: 'Chart 1'
                    }]
                },{
                    xtype: 'container',
                    layout: 'vbox',
                    flex: 1,
                    layoutConfig: {
                        align: 'stretch',
                        padding: '5'
                    },
                    items: [{
                        xtype: 'linechart'
                    },{
                        xtype: 'label',
                        height: 10,
                        text: 'Chart 2'
                    }]
                }]
            },{
                xtype: 'container',
                region: 'south',
                height: 225,
                layout: 'border',
                items: [{
                    //some things that work fine
                }]
            }]
        }, {
            title: 'Some other tab'
        }]
    }]
});

Any help would be appreciated

[mitchellsimoens]

vbox and hbox do no support auto sizing so you either have to give them fixed height/width or use the flex configs.