2011-09-02 35 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'。 (尽管我不确定将它添加到当前的布局选项列表中是否有效,或者是否需要自行设置。)