Vbox and hbox in extjs

Question

I want this structure to be hosted in extjs using the hbox and vbox layout for containers. I succeeded with peripheral components, but I cannot properly stretch the containers in the center. What am I doing wrong?

Here is the image:

I tried to create such a container for the central 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 is that I cannot stretch the inner containers to the full size of the inner container.

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

Or should I use a different strategy to fulfill my goal?

Answer 1

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

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

Also your first container has a layout: vbox should be listed above.

Edit: I 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 this back to containers and remove the title attribute.