2011-09-02 40 views
0

我有一個全屏的面板;Sencha觸摸屏佈局不佔用所有可用的屏幕空間

PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, { 
    fullscreen: true, 
    title: 'Dashboard', 
    html: '', 
    cls: 'card5', 
    iconCls: 'team', 
    layout: Ext.Viewport.orientation == 'landscape' ? { 
    type: 'hbox', 
    pack: 'center', 
    align: 'stretch' 
    } : { 
    type: 'vbox', 
    align: 'stretch', 
    pack: 'center' 
    }, 
    monitorOrientation: true, 
    listeners: { 
     orientationchange : this.onOrientationChange, 
    }, 
    styleHtmlContent: false, 
    initComponent: function() { 
    Ext.apply(this, { 
     items: [ 
     { 
     xtype: 'dashboardbox', 
     items: [rep1, rep2, rep3] 
     }, { 
     xtype: 'dashboardbox', 
     items: [rep4, rep5, rep6] 
     }] 
    }); 
    PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments); 
    } 
}) 

所以面板有一個hbox佈局與2個子面板。兒童小組實際佔用了全部的水平空間,但不是垂直的。

我可以在css中設置最小高度,在我的電腦上在Chrome和safari上受到尊重...但ipad忽略它。

子面板被定義爲;

PortalDashboard.views.DashboxBox = Ext.extend(Ext.Panel, { 
    cls: 'dashbox', 
    monitorOrientation: true, 
    listeners: { 
     orientationchange : this.onOrientationChange, 
    }, 
    layout: Ext.Viewport.orientation == 'landscape' ? { 
    type: 'vbox', 
    align: 'stretch', 
    pack: 'center' 
    } : { 
    type: 'hbox', 
    align: 'stretch', 
    pack: 'center' 
    }, 
    defaults: { 
    flex: 1 
    } 
}); 

Ext.reg('dashboardbox', PortalDashboard.views.DashboxBox); 

See what i mean,

回答

0

我曾與一些子板的父母的TabPanel收到了這一點。在你的父面板中試試layout: 'fit'。 (儘管我不確定將它添加到當前的佈局選項列表中是否有效,或者是否需要自行設置。)