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" ;) )