missing scrollbar in IE8 for a GridPanel nested inside of vbox and card layout

[sean.zhou]

I have a screen that shows correctly in FireFox 3.5 and 3.6; however, it is missing scrollbar in IE8 on a gridpanel nested inside of vbox layout.

Bellow is the code skeleton that generates this screen:

var FlightSchedulePanel = function(config) {
  var labelWidth = 150;
  var headerPanel = {
    layout: 'column',
    border: false,
    autoScroll: true,
    defaults: {
      labelWidth: labelWidth,
      defaultType: 'textfield'
      ,border: false
      ,xtype: 'container'
      ,layout: 'formdescription'
    },
    items: [{
      items: [{
        // ......
      }]
      ,width: 450
    }, {
      width: 200, 
      labelWidth: 80,
      style: 'padding-left:15px;',
      items: [{
        // .......
      }]
      ,layout: 'form'
    }, {
      labelWidth: 80,
      items: [{
        // .....
      }]
    }]
    ,flex: 1.7
  };
  
  var mainPanel = {
    xtype: 'griddetailcontainer'
    ,layout: 'card'
    ,split: true
    ,buttonIndex: 1
    ,allowEdit: security.hasMaintenance
    ,items: [{
      id: 'flightsGridPanel', // use id so that users can persist grid configuration changes.
      xtype: 'grid',
      frame: true,
      controller: config.controller,
      enableColLock: false
      ,tbar: [{
        menu: {xtype: 'menu'}
      }]      
    }, {
      xtype: 'panel'
      ,hideMode : 'offsets'
      ,autoScroll: true
      ,bodyStyle: 'background-color:#DFE8F6'
      ,items: [{
        // .....
      }]      
    }]
    ,flex: 8.3
  };
  
  var oo = {
    region: 'center'
    ,layout: {type:'vbox', align:'stretch'}
    ,items: [headerPanel, mainPanel]
    ,tbar: [{
      xtype: 'tbsave'
    }, {
      // more buttons
    }]
  };
  return new Ext.Panel(oo);
};

viewport = new Ext.Viewport({
  layout: 'border'
  ,items: [{
    region: 'north'
    // top title panel
  }, FlightSchedulePanel()]
});

The images are attached from both IE8 and FF3.5(6).

Regards

[mankz]

Your 'north' panel doesn't have any height specified.

[sean.zhou]

Your 'north' panel doesn't have any height specified.

It has height=0.