ExtJS fluid panels - extjs

Question

I'm coming from Twitter Bootstrap into ExtJS and unsure how to use which components in order to have a "row" which displays as many containers across the screen as will fit and then wrap them down.
Green boxes are where I would like to move the 2 grids:
Ext.onReady(function(){
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: [
'created',
'name'
]
});
var testStore = Ext.create('Ext.data.Store', {
model: 'Test',
data: [
{
name: 'Do Something To Something Else',
created: 'Wednesday'
},
{
name: 'Do Another Thing To Another Thing',
created: 'Thursday'
}
]
});
var activeTasksApplet = Ext.create('Ext.panel.Panel', {
title: 'Active Tasks',
width: 350,
height: 200
});
var testsGrid = Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
});
var pageContents = Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items: [
{
title: 'Header',
region: 'north',
height: 120,
minSize: 75,
maxSize: 150,
cmargins: '5 0 0 0'
},
{
title: 'Panels',
region: 'center',
margins: '5 0 0 0',
items: [
testsGrid,
{
title: 'Active Tasks',
margins: '5 0 0 0',
width: 400,
height: 200,
items: Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
})
},
Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
}),
{
title: 'Active Tasks',
margins: '5 0 0 0',
},
{
title: 'Active Tasks',
margins: '5 0 0 0',
}
]
}]
});
});

Answer 1

Update:
Okay, this time for the correct solution.
Use the column layout, it treats the items as divs with float
Docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Column
Fiddle: http://jsfiddle.net/8Pqtx/8/
Ext.onReady(function(){
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: [
'created',
'name'
]
});
var testStore = Ext.create('Ext.data.Store', {
model: 'Test',
data: [
{
name: 'Do Something To Something Else',
created: 'Wednesday'
},
{
name: 'Do Another Thing To Another Thing',
created: 'Thursday'
}
]
});
var activeTasksApplet = Ext.create('Ext.panel.Panel', {
title: 'Active Tasks',
height: 200
});
var testsGrid = Ext.create('Ext.grid.Panel', {
store: testStore,
width: 300,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
});
var pageContents = Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items: [
{
title: 'Header',
region: 'north',
height: 120,
minSize: 75,
maxSize: 150,
cmargins: '5 0 0 0'
},
{
title: 'Panels',
layout: 'column',
width: 500,
region: 'center',
items: [
testsGrid,
{
title: 'Active Tasks',
width: 200,
height: 200,
items: Ext.create('Ext.grid.Panel', {
store: testStore,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
})
},
Ext.create('Ext.grid.Panel', {
store: testStore,
width: 300,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
}),
{
title: 'Active Tasks',
width: 100
},
{
title: 'Active Tasks',
width: 100
}
]
}]
});
});