Sencha Touch带旋转木马的嵌套浮动面板

Question

到目前为止，我只是试图实现我在屏幕截图中嘲笑的内容。

基本上，我有一个全屏报告面板，其中嵌有6个面板。这些面板中的每一个（我称之为瓷砖，因为它更有意义）需要同时显示（使用布局：'fix'）主面板。 每个图块中都有一个旋转木马，通过单个ajax调用填充它的项目，如果ajax调用返回3个项目，则旋转木马将有3个项目等。

我无法正确排列瓷砖，因此它们都显示得很整齐，更重要的是，当设备从横向模式转为纵向模式时，它将起作用。

不必担心旋转木马部分太多，试图让瓷砖在面板内正确排列是一种痛苦。我几乎可以用css到达那里，通过浮动...但是第一个面板总是看起来搞砸了。我已经做了一些阅读，试图以更“森科”的方式来做这件事。

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

Answer 1

适合布局用于一次显示单个项目，因此使用它作为仪表板面板的布局将不起作用。除了编写自定义布局以在模拟中实现3x2平铺效果之外，我还将仪表板的布局设置为

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

所以现在您添加的任何项目都将位于面板主体的中心并垂直堆叠..因此，为每个行添加2个面板，并在这些面板上使用hbox布局并为每个面板添加3张卡片< / p>

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

（如果您计划在不同的盒子上放置不同的尺寸，那些对齐或打包设置可能不适合您的需要，在这种情况下，您需要使用flex属性为框提供您想要的比例）