[2.0b1/rc1] GridPanel rendering bug in IE

[jozzhart]

Hello,

Finding some GridPanel rendering issues in both IE6 and IE7.

First issue effects about IE6 and IE7. If I have a gridpanel with a fixed width, and scrolling enabled on the parent container, if the grid is bigger than the available area and the scroll bar appears, scrolling across only scrolls the column header.

http://extjs.jozzhart.com/gridOne.htm

Ext.onReady(function(){

		var xg = Ext.grid;

		var reader = new Ext.data.ArrayReader({}, [
		   {name: 'company'},
		   {name: 'price', type: 'float'},
		   {name: 'change', type: 'float'},
		   {name: 'pctChange', type: 'float'},
		   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
		   {name: 'industry'},
		   {name: 'desc'}
		]);
		
 		var alertsGrid = new xg.GridPanel({
			ds: new Ext.data.Store({
				reader: reader,
				data: xg.dummyData
			}),
			cm: new xg.ColumnModel([
				new xg.RowNumberer(),
				{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
				{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
				{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
				{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
				{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
			]),
			viewConfig: {
				forceFit:true
			},
			width : '800',
			title:'Grid with Numbered Rows and Fixed width',
			iconCls:'icon-grid'
		});

		var viewport = new Ext.Viewport( {

        layout:"border",
        items:[{
            region:"center",
            title:"dashboard",
			autoScroll : true,
			items : [alertsGrid]
          },{
            region:"north",
            title:"search",
            height:40
          },{
            region:"south",
            title:"Top Questions",
            collapsible:true,
            collapsed:true
          },{
            region:"west",
            title:"good practice",
            collapsible:true,
            width:200,
            collapsed:true
          }]
	})
});

Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

Second bug only effects IE6. If the gridpanel is set to autoWidth : true, width : 'auto' the grid doens't resize to fit the container, and a scroll bar appears, with the same scrolling issue as described above.

http://extjs.jozzhart.com/gridTwo.htm

Ext.onReady(function(){

		var xg = Ext.grid;

		var reader = new Ext.data.ArrayReader({}, [
		   {name: 'company'},
		   {name: 'price', type: 'float'},
		   {name: 'change', type: 'float'},
		   {name: 'pctChange', type: 'float'},
		   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
		   {name: 'industry'},
		   {name: 'desc'}
		]);
		
 		var alertsGrid = new xg.GridPanel({
			ds: new Ext.data.Store({
				reader: reader,
				data: xg.dummyData
			}),
			cm: new xg.ColumnModel([
				new xg.RowNumberer(),
				{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
				{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
				{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
				{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
				{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
			]),
			viewConfig: {
				forceFit:true
			},
			autoWidth : true,
			width : 'auto',
			title:'Grid with Numbered Rows and Force Fit',
			iconCls:'icon-grid'
		});

		var viewport = new Ext.Viewport( {

        layout:"border",
        items:[{
            region:"center",
            title:"dashboard",
			autoScroll : true,
			items : [alertsGrid]
          },{
            region:"north",
            title:"search",
            height:40
          },{
            region:"south",
            title:"Top Questions",
            collapsible:true,
            collapsed:true
          },{
            region:"west",
            title:"good practice",
            collapsible:true,
            width:200,
            collapsed:true
          }]
	})
});

Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

[smcneill]

I have virtually the exact same code resulting in the same scenario. Any suggestions?

[lupin85.luca]

I've got the same problems.
Did you find how to resolve them?

[tony_murphy@yahoo.com]

Think same problem:

Problem can be seen in from-grid example in release, works ok in firefox, scrolls horizontally for ever in IE6

I manually set width of .x-panel-body in my html file as a quick workaround

<style type="text/css">
/*hack when converting table in ext 2 for ie */
.x-panel-body {
width: 966px;
}
</style>

[tryanDLS]

Try removing the width from you GridPanel config. Since you're putting it into a border layout of the ViewPort, it's layout should handle sizing it to the size of the center region, which should be calculated as whatever is left after sizing the west region.

[jozzhart]

Hi Tim

Removing the width from the GridPanel doesn't fix it......

http://extjs.jozzhart.com/gridThree.htm

[mystix]

this is probably a duplicate of the bug reported in this thread:
http://www.sencha.com/forum/showthread.php?t=15642

let us know if the solution there resolves your issue.

[Zyclops]

I'm having the same issue (using 2.0-RC1):

In ie7, ff, safari it looks fine but in ie6 it's about 10x the size of the screen.

I originally just had a grid panel.. then i've tried sticking it in a container layout like below:

this.grid =  new Ext.grid.GridPanel( {  store:  ds,
                                     cm: colModel,
                                        loadMask: true,
                                        plugins: filters,
                                        height: 400,
                                        frame: true});
var container = new Ext.Container({applyTo: this.grid_name + '_panel' 
                                           layout: 'fit',
                                           items: this.grid});

Setting a fixed width on the container or the grid stops it being 10* but that doesn't fix the issue as I want the grid to take up any size it can within it's container div (not the viewport).

[Zyclops]

Does anyone know if this is actually a bug or expected behaviour?

If it is expected behaviour what should you normally do to make a grid just fill it's container.

[thescott18]

Does anyone know if this is actually a bug or expected behaviour?

If it is expected behaviour what should you normally do to make a grid just fill it's container.

I would like to know this as well. It appears that making any of the dimensions "auto" will cause the grid to break out of its container in IE6. Any solutions without having to preset a width and height?