PDA

View Full Version : [2.0b1] The head row of GridPanel in Viewport can't move horizontally in IE7



abent
24 Oct 2007, 9:06 AM
Extjs version: 2.0Beta1
ext-base.js alone
windows 2003 sp2
Firefox 2.0.7 IE 7.0

probolem:
In IE7 the head row can't move horizontally with scrollbar if GridPanel in Viewport,


Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49,
'9/1 12:00am']
];

var ds = new Ext.data.Store( {
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'
}])
});
ds.loadData(myData);

// example of custom renderer function
function italic(value) {
return '<i>' + value + '</i>';
}

// example of custom renderer function
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// the DefaultColumnModel expects this blob to define columns. It can be
// extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([ {
id : 'company',
header : "Company",
width : 160,
sortable : true,
locked : false,
dataIndex : 'company'
}, {
header : "Price",
width : 75,
sortable : true,
dataIndex : 'price'
}, {
header : "Change",
width : 75,
sortable : true,
dataIndex : 'change'
}, {
header : "% Change",
width : 75,
sortable : true,
dataIndex : 'pctChange'
}, {
header : "Last Updated",
width : 85,
sortable : true,
dataIndex : 'lastChange'
}]);

// create the Grid
var grid = new Ext.grid.GridPanel( {
ds : ds,
cm : colModel,
region:'center',
autoExpandColumn : 'company',
height : 350,
width : 600,
title : 'Array Grid'
});

var viewPort = new Ext.Viewport( {
layout : 'border',
items : grid
});

grid.getSelectionModel().selectFirstRow();
});

tryanDLS
24 Oct 2007, 9:20 AM
I'm not seeing this behavior. It maybe b/c you have a width/height on your GridPanel or b/c you're saying layout:'border'. Since you put it a Viewport you don't need dimensions and it should be layout:'fit'. The Viewport will be 100% of the browser and the grid will fill it's container.

Clayton
24 Oct 2007, 9:59 AM
I think it has something to do with the doctype ... try removing the doctype if you're in IE7 and see what happens.

http://extjs.com/forum/showthread.php?t=15367

abent
24 Oct 2007, 11:28 AM
Thanks. I try you said,

to Clayton : yes,if I remove doctype,all is OK.

to tryanDLS : must set layout option of Viewport,otherwise the GridPanel show itself by own way. And when Viewport layout set,it is not affected whether GridPanel have a width/height or not.

test in IE7&FF2.0.7

joe1chen
24 Oct 2007, 9:33 PM
A similar bug was also posted here:

http://extjs.com/forum/showthread.php?t=14256&highlight=grid+header+scroll

It seems like there is some issue with the header scroll in IE7/IE6. I was experiencing issues with header not scrolling properly in a grid, and I am not using a viewport.

I found a solution for the header scroll issue and posted the solution in the thread above.

To summarize the problem, I found that if you change the scroll javascript to move the header left rather than using scrollLeft, then it works. See the thread above for the code.

MaxT
26 Oct 2007, 2:35 AM
I'm experiencing the same bugs.

Ext 2.0b1
Windows XP
Ok with Fx 2.0.0.7, problems with IE 6 and 7.

I have a standard gridPanel in a viewport, layout "fit", no width on grid.

IE7 : headers only scroll horizontally if you leave out the DTD. Doesn't scroll when the HTML 4.01 Transitional DTD is included*.
IE6 : don't even get a horizontal scrollbar.

In IE6 and 7 I also have problems with the columns list from the header context menu not being wide enough for the header text. If this bug has not been delt with already I can provide a screen shot.

* Is there an official statement somewhere of which Doctypes ARE supported by Ext, if any, or will things only designed to work when IE is in proprietry mode?

Thanks

Max

jsakalos
28 Oct 2007, 5:07 PM
Thanks for reporting. We will take a look at it and if it is Ext bug it will be fixed, if not we will try to find a workaround for IE.

MaxT
7 Nov 2007, 4:03 AM
Any progress on this.

The grid behaviour with regards to header scrolling has not changed in Ext 2.0 RC 1 for me.

I'd like to know what the situation will be in the final release version.

Thanks,

Max

jsakalos
7 Nov 2007, 6:40 AM
The bug list is being processed now and the bugs are being fixed and fixes are being committed to svn. I cannot say right now if this specific bug has already fixed or not.

isglass
13 Nov 2007, 12:53 AM
I had the same problem, fixed it by manually refreshing headers on scroll:


grid.on('bodyscroll', function(left, top) {
grid.getView().refresh(true);
});