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

【问题标题】：Sencha Touch nested floating panels with carouselsSencha Touch 带有旋转木马的嵌套浮动面板
【发布时间】：2011-08-23 15:41:10
【问题描述】：

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

基本上，我有一个全屏报告面板，其中嵌套了 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);

【问题讨论】：

标签： sencha-touch

【解决方案1】：

Fit 布局用于一次显示单个项目，因此无法将其用作仪表板面板的布局。除了编写自定义布局以在您的模型中实现 3x2 平铺效果外，我还将仪表板的布局设置为

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

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

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

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

【讨论】：