extJS 4 Component Layout - layout

Question

I was wondering what would be the best way of achieving a layout like this in extJS:
I have 4 different components that I would like to place in each respective box but am having trouble figuring out exactly how I can do it.
Here is a snippet of some code I have been working on:
Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.container.Container',
height: '100%',
width: '100%',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
items: [
Ext.create('/../../../chefRequiredCookbooksGridPanel'),
Ext.create('/../../../chefRoleSetupFormPanel')
]
}, {
flex: 1,
items: [
Ext.create('/../../../chefOptionalCookbooksGridPanel'),
Ext.create('/../../../chefAttributeGridContainer')
]
}]
});
Here is what my current layout comes out to:
I'd like for it to fill the whole Tab Panel and have equal widths and heights per section.
Any ideas?
Thanks

Answer 1

You can try the below snippet, where internal container items(A, B, C, D) can be replaced with your custom items.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [
{
xtype: 'container',
html: 'Cell A content',
flex: 1
},{
xtype: 'container',
html: 'Cell B content',
flex: 1
}
]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
html: 'Cell C content',
flex: 1
},{
xtype: 'container',
html: 'Cell D content',
flex: 1
}
]
}]
}]
});
}
});