Problems in IE with GridPanel and forceFit

[melfice]

I have got the old Problem that the width of the first column is "unlimited", but only with Internet Explorer.

Internet Explorer:

http://www.pictureupload.de/pictures...8152342_IE.JPG

Firefox:

http://www.pictureupload.de/pictures...8151831_FF.JPG

And here is my code:

    var checkColumn = new xg.CheckColumn({
           header: 'Allow?',
           sortable: true,
           dataIndex: 'Level',
           width: 60
    });

    var griduser = new xg.GridPanel({
        id: 'griduser',
        title: 'Benutzer',
        store: UserStore,
        width: 200,
        border: false,
        columns: [
            {header: "ID", width: 10, sortable: true, hidden: true, dataIndex: 'ID'},
            {header: "Name", width: 200, sortable: true, dataIndex: 'Name'},
            {header: "Team", width: 80, sortable: true, dataIndex: 'Gruppe'},
            checkColumn
        ],
        plugins: checkColumn,
        view: new xg.GroupingView({
            forceFit: true,
            groupTextTpl: '{text} ({[values.rs.length]})' 
        }),
        listeners:{
            cellclick: function(grid, rowIndex, columnIndex, e){
                var record = grid.getStore().getAt(rowIndex);
                var fieldName = grid.getColumnModel().getDataIndex(0);
                var data = record.get(fieldName);
                adminuser(data);
            }
        }
    });

    var compPanel = new Ext.Panel({
        id: 'comppanel',
        title: 'Computer'
    });

    var window = new Ext.Window({
        id: 'window',
        title: 'xxxxx',
        minWidth: 360,
        minHeight: 500,
        width: 360,
        height: 500,
        resizable: true,
        layout: 'accordion',
        plain: true,
        closable: true,
        x: 20,
        y: 30,
        items: [griduser, compPanel],
            bbar: [
                'Suche: ', ' ',
                new Ext.app.SearchField({
                    id: 'searchfield',
                    store: UserStore
                })
            ]
    });

I hope someone can help me? I ve already changed the 10000px in the ext-all.css and searched the forum, but none of the suggested fixes could help me. If I set forceFit to false, it is correctly rendered in IE, but it won't fit if I am gonna resize the window.

Thanks in advance!

[devnull]

What does the grid's parent layout look like? (in an Ext.Window I assume?)

[melfice]

What do you mean with "parent layout look"? The grid is an item of the Ext.Window, that's right!

[Schenck]

Hi, I have got the same Problem and I fixed it with
forceFit: false

after this it works fine in IE.

Greets Schenck

[melfice]

Yeah, I mentioned it before, but the then the next problem will occur. After resizing the window, the columns wont change their width. Is there any solution for this?

Regards melfice

[Condor]

You need to make sure that the size of the grid is maintained by the window layout.

You should post your code of the window config.

ps. If the grid is the only item in the window then you can simply add layout:'fit' to the window config (and remove the width from the grid, because it isn't needed then).

[melfice]

Thanks so far for your help!

Ok, I removed the width of the gridPanel.

And isn't this my window config code?

    var window = new Ext.Window({
        id: 'window',
        title: 'xxxxx',
        minWidth: 360,
        minHeight: 500,
        width: 360,
        height: 500,
        resizable: true,
        layout: 'accordion',
        plain: true,
        closable: true,
        x: 20,
        y: 30,
        items: [griduser, compPanel],
            bbar: [
                'Suche: ', ' ',
                new Ext.app.SearchField({
                    id: 'searchfield',
                    store: UserStore
                })
            ]
    });

The window isn't configured anywhere else imho.

And the gridPanel won't be the only item in the window, so I need the accordion layout!

[Condor]

Accordion layout can have some annoying side-effects with sizing.
Couldn't you do the same with a border layout (put the grid in the center region and the panel in a collapsible south region)?

[melfice]

Thanks for your fast reply!

Ok I tried it with the border layout, but then my second Panel in the window will stay at bottom, when I collapse the first. Thats why I wanted to use the accordion layout.

[Condor]

I assume this is a classic 'grid with detail' layout (where the detail can optionally be hidden)?

That is why I suggested that you set the grid to center region and the detail panel to collapsible south region.