IE Grid width error

[putty]

I'm having problems with grid width in IE, in firefox the grid is set to the correct size however in IE it stretches 5 times across the screen.

I am using the Ext.grid.TableGrid class that extends Ext.grid.GridPanel

this is my code to create the grid

Table

<table id="RelatedRntitiesGrid" style="width:400px">
        <thead>
            <tr>
                <th>Gis</th>
                <th>Type</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>32</td>
                <td>Nationa Parks</td>
                <td>Gloucester Island National Park</td>
            </tr>
        </tbody>
    </table>

Javascript

// create note grid
        var RelatedRntitiesGrid = new Ext.grid.TableGrid("RelatedRntitiesGrid",{
            groupField:'Type',
            sortInfo:{field: 'Name', direction: "ASC"},
            width:600,
            height:300
        });
        RelatedRntitiesGrid.render();

This problem also accurse in the example (grid/from-markup.html) that ships with Ext

Dose anyone know a fix for this problem?

Thanks,
Levi

[Joshua.Suereth]

We faced a similar problem where IE was messing up the widths of a GridPanel. I'm unfamiliar with the TableGrid, however here was our solution:

 var myGrid = new Ext.grid.GridPanel({
     ...
      viewConfig: { forceFit: true },
     ...
});

should be changed to

 var myGrid = new Ext.grid.GridPanel({
     ...
      viewConfig: { autoFill: true },
     ...
});

Otherwise you get very strange behavior in IE. Hope that helps.

[putty]

Thanks for replying,
I think the problem was with TableGrid, I spent the time and manually upgraded all our old tables to ExtJS grids without the use of TableGrid and had no problems. Took me a good day and a half to do this but it was worth it.

Thanks,
Levi