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