Problem with ExtJS vbox layout nested in a hbox layout
So, after a lead from Jay Garcia I've fixed this in moments.
I needed to set my viewport to be of layout type "fit"
vp = new Ext.Viewport({
layout : 'fit',
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
then I needed to add the layout attribute into the vbox and the hbox (previously I found that the layout attribute with the layoutConfig type attribute screwed things up, so removed them)
var extraPanel = {
title : 'extra panel',
layout : 'vbox',
layoutConfig : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
defaults : {
flex : 1,
frame : true
},
items : [workflowPanel,accessPanel]
};
var overviewPanel = {
layout : 'hbox',
layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
defaults :{
frame : true,
flex : 1
},
items : [detailPanel,extraPanel]
};
Those 2 changes gave me a beautiful layout, exactly the way I wanted it to display.
Thanks Jay (PS. go buy Jay's book "ExtJS in Action" ;) )