Can't get simple 4box layout working with flex

[BoroChris]

I am trying to do a simple 4 box layout (i.e. have a screen divided into 4 panels which will each have different content.
If I use fixed height/width for each hbox/vbox then it works fine however if I try to use flex then I just get everything squashed into a few pixels in the middle of the screen. I have tried using %ge height/width but these also do not seem to work. I need to use flex so that it will work on differnet device formats.

This is the code as is but I have tried every combination that I can think of

STmenu7=new Ext.Panel(
    {cardpanel:"MainCardPanel",id:"MenuPnl",layout:"fit",transition:"pop",items:[
    {align:"stretch",flex:1,id:"mp1",layout:"vbox",xtype:"panel",items:[
        {align:"stretch",flex:1,id:"mp2",layout:"hbox",xtype:"panel",items:[
            {flex:1,id:"mpb1",xtype:"panel"}
           ,{flex:1,id:"mpb2",xtype:"panel"}
            ]
        }
        ,{align:"stretch",flex:1,id:"mp3",layout:"hbox",xtype:"panel",items:[
            {flex:1,id:"mpb3",xtype:"panel"}
            ,{flex:1,id:"mpb4",xtype:"panel"}
            ]
        }
    ]}
    ]}
);

I am sure it must be something obvious as this seems such a basic requirement but I just can't seem to get it to work and would appreciate any help.

[mitchellsimoens]

Can't read your code as it's all jumbled up but here is an example that works for me:

new Ext.Container({
    fullscreen : true,
    layout     : {
        type  : 'hbox',
        align : 'stretch'
    },
    items      : [
        {
            xtype  : 'container',
            flex   : 1,
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
            items  : [
                {
                    xtype : 'button',
                    flex  : 1,
                    text  : 'Top-Left'
                },
                {
                    xtype : 'button',
                    flex  : 1,
                    text  : 'Bottom-Left'
                }
            ]
        },
        {
            xtype  : 'container',
            flex   : 1,
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
            items  : [
                {
                    xtype : 'button',
                    flex  : 1,
                    text  : 'Top-Right'
                },
                {
                    xtype : 'button',
                    flex  : 1,
                    text  : 'Bottom-Right'
                }
            ]
        }
    ]
});