CODEWITHSUNDEEP
internet-exploreruser-interfaceextjsscrollbar
Snowright
Snowright

Reputation: 625

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

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.

alt text

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.

Upvotes: 2

Views: 13967

Answers (3)

klh
klh

Reputation: 610

I'm sure I've found much better and easier solution. Just set the width and height to '100%' like that:

width: '100%',
height: '100%'

when creating the Ext.grid.Panel.

I'm answering such an old question because it is the first one you get when searching on google.

Upvotes: 0

Snowright
Snowright

Reputation: 625

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!

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20431

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.

Upvotes: 0

Related Questions