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觸摸與旋轉木馬嵌套浮動面板

回答

相關問題