Sencha touch panel layout not taking up all available screenspace

I have a panel which is fullscreen;

  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.superc开发者_如何学运维lass.initComponent.apply(this, arguments);
  }
})

So the panel has a hbox layout with 2 child panels. The child panels actually take up the full amount of horizontal space, but not vertically.

I can set the min-height in the css, which gets respected on in chrome and safari on my pc... but the ipad ignores it.

The child panels are defined as;

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

I've had this before with a TabPanel parent of some sub panels. Try layout: 'fit' in your parent panel. (Although I'm not sure if adding it to your current list of layout options will work or if it needs to be set by itself.)