Sencha触摸面板布局不占用所有可用的屏幕空间

Question

我有一个全屏的面板;

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

因此面板有一个带有2个子面板的hbox布局。子面板实际上占据了全部水平空间，但不是垂直空间。

我可以在css中设置min-height，这在我的电脑上的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);

Answer 1

之前我已经使用了一些子面板的TabPanel父级。在您的父面板中尝试layout: 'fit'。 （虽然我不确定将它添加到您当前的布局选项列表中是否可行，或者是否需要自行设置。）