ExtJS GridPanel Scrollbar does not appear in IE7 but it does in Firefox, etc

Question

Setup

I have an accordion layout containing a "properties" panel that nests two inner panels. The first inner panel holds a Ext.DataView, while the second panel is the Ext.grid.GridPanel in question. In the screenshot below, the white space containing the folder icon is the dataview, and below that is the gridpanel.

Problem

In Firefox, Chrome, and Opera, there is a scrollbar that appears when my gridpanel has an overflow of properties. It is only in Internet Explorer that it does not appear. I am, however, able to scroll using my mouse scroll button in all browsers, including IE.

I've also tried removing our custom css file in case it was affecting it somehow, but there was no change in doing so.

I'm not sure exactly what code I should show as I don't know where the exact problem is coming from but here is the code for the mainpanel and gridpanel.

var mainPanel = new Ext.Panel({
    id : 'main-property-panel',
    title : 'Properties',
    height : 350,
    autoWidth : true,
    tbar : [comboPropertyActions],
    items : [panel1] //panel1 holds the DataView
});

var propertiesGrid = new Ext.grid.GridPanel({
    stripeRows : true,
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(),
    autoWidth : true,
    store : propertiesStore,
    cm : propertiesColumnModel
})

//Add gridpanel to mainPanel
mainPanel.add(propertiesGrid);
mainPanel.doLayout();

Any help into the right direction would be greatly appreciated. Thank you.

Answer 1

Does the scrollbar appear if you resize/hide/show the panel? If so, it could be an IE hasLayout issue. If not, it's likely an issue with your layout (or possibly an Ext bug). Hard to tell anything from what you've posted. Have you asked on the Ext forums?

For things like this, I usually try to systematically cut the code back to the smallest possible layout that still shows the issue. This often leads people to finding their own issues if indeed it is a configuration issue of some sort. But at the very least (since your example does work in everything but IE, the config is probably fine) it will make it much easier for someone else to look at and try to reproduce the issue.

Answer 2

My solution for this problem was removing autoWidth : true from my gridpanel config. Instead, I manually set a width value and have a function change the gridpanel's height and width on the property panel's body resize. Below is my modified code along with the function to manually set the size of my gridpanel when the property panel's width and height changes.

var propertiesGrid = new Ext.grid.GridPanel({

    stripeRows : true,
    height : mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight(),
    width : mainPanel.getSize().width,
    store : propertiesStore,
    cm : propertiesColumnModel

})

//Add gridpanel to mainPanel
mainPanel.add(propertiesGrid);
mainPanel.doLayout();

mainPanel.on('bodyresize', function() {

    //propertiesGrid.setSize(Width, Height);
    propertiesGrid.setSize(mainPanel.getSize().width, 
    mainPanel.getSize().height-iconDataView.getSize().height-mainPanel.getFrameHeight());

});

Thanks all for your help!