title: column in table layout shifting/spanning panels incorrectly EXTJS
body: <p>I am having trouble with a simple table layout in ExtJs 4.0.  I have 4 panels, which I would like to arrange in a 2X2 panel format. Normally this would be 2 columns and 2 rows, and I can do that in ExtJs successfully; however, for my purposes I would like to have 4 columns and 2 rows.  I want the layout to be like so:</p>
  
  <pre><code>|1|222|
  |33|44|
  </code></pre>
  
  <p>Panel 1: spans one column, one row</p>
  
  <p>Panel 2: spans 3 columns, one row</p>
  
  <p>Panel 3: spans 2 columns, one row</p>
  
  <p>Panel 4: spans 2 columns, one row</p>
  
  <p>This seems simple enough to do, but I can't seem to get it working correctly!
  The following is the entirety of my code, which I copied and modified from the ExtJs example at : <a href="http://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html" rel="nofollow noreferrer">http://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html</a> (for some reason the example doesn't have a link to its Javascript code, but I was able to find it in my ExtJs examples folder under ext-4.0.1/examples/layout/table.js)</p>
  
  <pre><code>Ext.onReady(function() {
  var panel = Ext.create('Ext.Panel', {
      id:'main-panel',
      baseCls:'x-plain',
      renderTo: Ext.getBody(),
      layout: {
          type: 'table',
          columns: 4
      },
      // applied to child components
      defaults: {frame:true, width:200, height: 200},
      items:[{
          title:'Item 1',
          colspan:1,
          width:200
      },{
          title:'Item 2', 
          colspan:3,
          width:600
      },{
          title:'Item 3', 
          colspan:2,
          width:400
      },{
          title:'Item 4',
          colspan:2,
          width:400
  
      }]
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Now, this code, as far as I know, SHOULD work. But the result I'm getting is this:
  <img src="https://i.stack.imgur.com/J3N74.jpg" alt="Column Table Layout"></p>
  
  <p>Anyone got any hints as to why Panel 2 is being shifted one column to the right? The example from Sencha Docs has plenty of panels spanning more than one column, but I must be overlooking something and I can't figure out what!</p>
  
  <p>Thanks for all of your help!</p>