vbox and hbox in extjs

Question

I want to make this structure in extjs usign nesting of hbox and vbox layout for the containers. I succeeded with the periferal components but I cannot stretch properly the containers in the center. What do i do wrong?

Here is the image:

I tried creating container like this, for the center grid

var innerContainer = Ext.create('Ext.container.Container', {

    layout:vbox,

    items:[{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    },{
        xtype:'container',
        flex:1,
        layout: 'hbox',
        items:[{
             xtype:'container',
             flex:1
        },{
             xtype:'container',
             flex:1
        }]
    }]
});

The problem I get is I cannot stretch the inside containers to the full size of the innerContainer.

Can I achieve this with empty container and without setting width property?

Or should I use different strategy to acomplish my goal?

Answer 1

If you want your layout to stretch your need to use the following:

layout: {
   type: 'vbox',
   align: 'stretch'
}

Also your first container has a layout: vbox needs to be the above.

Edit: I've made a fiddle for you: http://jsfiddle.net/Jgpgy/

I used panels instead of containers so you have a visual result, you can just change that back into containers and remove the title attribute.