PDA

View Full Version : hbox vbox layout issue



prasanthsd
26 Sep 2012, 3:59 PM
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
28 Sep 2012, 7:59 AM
vbox and hbox do no support auto sizing so you either have to give them fixed height/width or use the flex configs.