ExtJS fluid panels

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
      }
    ]
  }]
});
});