Sencha Touch nested floating panels with carousels

Question

I've only got so far trying to achieve what i've mocked in the screenshot.

mockup

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.

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.

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.

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

--

PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
  html: '',
  cls: 'dashtilecontent',
  initComponent: function () {
    Ext.apply(this, {
     html: '<h1>99.99%</h1>'
    });
    PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
  }
});

Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);

chrixian chrixian · Accepted Answer · 2011-08-25T03:34:52

Fit layout is used to show a single item at a time so using it as the layout for your dashboard panel won't work. Besides writing a custom layout to achieve the 3x2 tile effect in your mock up I would set the layout of the dashboard to

layout: {
  type: 'vbox',
  align: 'center',
  pack: 'center'
}

so now any items you add will be in the center of the panel body and stack vertically.. so add 2 panels for each of the rows and on those panels use an hbox layout and add 3 cards to each of those panels

layout: {
  type: 'hbox',
  align: 'center',
  pack: 'center'
}

(those align or pack settings might not suit your needs if you plan to have different sizes on different boxes, in which case you'll need to use the flex property to give the boxes the proportions you want)

Sencha Touch nested floating panels with carousels

1 Answers