Sencha触摸与旋转木马嵌套浮动面板

mockup

基本上，我有具有6个面板嵌套在全屏报告面板。需要同时显示这些面板中的每一个（我将它们称为拼贴，因为这更有意义）（对主面板使用布局：'修复'）。每瓦将在其中一个转盘，该转盘得到它的通过一个单一的Ajax调用的方式填充项目，如果AJAX调用返回3项，然后传送带将有3项等

我遇到麻烦瓷砖安排妥当，以便它们都能整齐地显示出来，更重要的是，当设备从横向模式转换到纵向模式时，这种方式将起作用。

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

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

来源

2011-08-23 GordonB

飞度布局用于一次显示一个单一的项目，以便将其作为布局的仪表板将无法工作。除了编写自定义布局，实现你的模拟的3x2的瓷砖效果了，我会在仪表板的布局设置为

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

所以现在你添加将在面板主体的中心和垂直堆叠的任何项目。。所以加2个面板为每个行，并且这些面板使用与HBox布局，并添加3张卡到每台面板

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

（那些对齐或包设置可能无法满足您的需求，如果您计划在不同的盒子上有不同的尺寸，在这种情况下，你需要使用flex属性来给出你想要的比例）

来源

2011-08-25 03:34:52 chrixian

Sencha触摸与旋转木马嵌套浮动面板

回答

相关问题