Layout question with alignment

[AlexLans]

I'm using Sencha Touch 2.0.1.1
I need to build a panel with 6 buttons, like this:
screenshot.PNG
The buttons should be equal alligned horizontally and vertically. The size of the buttons should be around 150px x 150px I want them to be squared.

I've created this with the following code:

initialize: function () {        var upperspacer = Ext.create('Ext.Container', {
            height: upperMarginHomeScreen,
            layout:{
                type: 'hbox',
                align: 'strech'
            },
            html: '&nbsp'
        });


        var middlespacer = Ext.create('Ext.Container', {
            height: middleSpacerHomeScreen,
            layout:{
                type: 'hbox',
                align: 'strech'
            },
            html: '&nbsp'
        });
       
        var upperpanel = Ext.create('Ext.Container', {
            height: 256,
            layout:{
                type: 'hbox',
                align: 'strech'
            },
            defaults:{flex:'1'},
            items: [
            {
                xtype: 'panel',
                heigth: 190,
                width: leftMarginHomeScreen
            },
            {
                xtype: 'button',
                id: 'cmdRadiology',
                cls: 'radiologyButton',
                pressedCls: 'radiologyButtonPressed',
                scope: this
            },
            {
                xtype: 'panel',
                heigth: 190
            },
            {
                xtype: 'button',
                id: 'cmdDocuments',
                html: 'Documenten',
                heigth: 190
            },
            {
                xtype: 'panel',
                heigth: 190
            },
             {
                xtype: 'button',
                html: 'Documenten',
                heigth: 190
            },
            {
                xtype: 'panel',
                heigth: 190,
                width: leftMarginHomeScreen
            }
            ]
        });


        var bottompanel = Ext.create('Ext.Container', {
            height: 256,
            layout:{
                type: 'hbox',
                align: 'strech'
            },
            defaults:{flex:'1'},
            items: [
            {
                xtype: 'panel',
                heigth: 190,
                width: leftMarginHomeScreen
            },
            {
                xtype: 'button',
                html: 'Radiologie',
                heigth: 190
            },
            {
                xtype: 'panel',
                heigth: 190
            },
            {
                xtype: 'button',
                html: 'Documenten',
                heigth: 190
            },
            {
                xtype: 'panel',
                heigth: 190
            },
             {
                xtype: 'button',
                html: 'Documenten',
                heigth: 190
            },
             {
                xtype: 'panel',
                heigth: 190,
                width: leftMarginHomeScreen
            }
            ]
        });

But as you can see, the allignment is all hardcoded. When I turn my iPad all the allignment is messed up. Can anyone help me out here? There is no control in Sencha like a Unigrid (Silverlight) that detirmes all spaces etc.? I need some help with this. Thank you.

[AlexLans]

some of the code is ST1.0 style sorry for that. I'm fixing it right away.

[AlexLans]

Solved. I've created 2 containers with type hbox. The I've put them in a vbox container and the buttons are nicely alligned.