title: Sencha Touch nested floating panels with carousels
body: <p>I've only got so far trying to achieve what i've mocked in the screenshot.</p>
  
  <p><img src="https://i.stack.imgur.com/zckfo.png" alt="mockup"></p>
  
  <p>Basically, i have a fullscreen reports panel that has 6 panels nested within it.  Each of these panels (i'll call them tiles, as that makes more sense) need to be shown at the same time (used the layout:'fix') for the main panel.
  Each tile will have a carousel within it that gets it's items populated by means of a single ajax call, if the ajax call returns 3 items then the carousel will have 3 items etc.</p>
  
  <p>I'm having trouble getting the tiles arranged properly, so that they are all shown neatly, and more importantly in a way that will work when the device goes from landscape to portrait mode.</p>
  
  <p>Without worrying about the carousel part too much, trying to get the tiles arranged properly within the panel is a pain.  I can pretty much get there with css, by floating... but the first panel always looks messed up.  I've since done some some reading trying to achieve a more "sencha" way of doing this.</p>
  
  <pre><code>var rep1 = new PortalDashboard.views.Reportimagetile;
  var rep2 = new PortalDashboard.views.Reportimagetile;
  var rep3 = new PortalDashboard.views.Reportsinglefigtile
  var rep4 = new PortalDashboard.views.Reportimagetile;
  var rep5 = new PortalDashboard.views.Reportimagetile;
  var rep6 = new PortalDashboard.views.Reportimagetile;
  
  PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
    title: 'Dashboard',
    html: '',
    cls: 'card5',
    layout: 'fit',
    iconCls: 'team',
    styleHtmlContent: true,
    initComponent: function () {
      Ext.apply(this, {
        items: [
        rep1, rep2, rep3, rep4, rep5, rep6]
      });
      PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
    }
  });
  
  
  
  Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);
  </code></pre>
  
  <p>--</p>
  
  <pre><code>PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
    html: '',
    cls: 'dashtilecontent',
    initComponent: function () {
      Ext.apply(this, {
       html: '&lt;h1&gt;99.99%&lt;/h1&gt;'
      });
      PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
    }
  });
  
  Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);
  </code></pre>