PDA

View Full Version : missing scrollbar in IE8 for a GridPanel nested inside of vbox and card layout



sean.zhou
22 Jul 2010, 2:11 PM
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
22 Jul 2010, 8:31 PM
Your 'north' panel doesn't have any height specified.

sean.zhou
23 Jul 2010, 9:29 AM
Your 'north' panel doesn't have any height specified.

It has height=0.