View Full Version : [CLOSED][3.x] GridPanel does not scroll horizontally when columns resized manually

3 May 2009, 7:17 AM
OS: OS X 10.5.6
Browser: Fx 3.0.10
Demonstration : http://tdg-i.com/img/screencasts/2009-05-03_1117.swf
Test Case:

var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']

var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ['fullName', 'state']

var cm = new Ext.grid.ColumnModel([ // 1
header : 'Full Name',
dataIndex : 'fullName' // 2
header : 'State',
dataIndex : 'state'

var gridView = new Ext.grid.GridView(); // 3
var selModel = new Ext.grid.RowSelectionModel({ // 4
singleSelect : true

var grid = new Ext.grid.GridPanel({ // 5
title : 'Our first grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store, // 6
view : gridView, // 7
colModel : cm, // 8
selModel : selModel

3 May 2009, 7:28 AM
autoHeight: true

It sets overflow to hidden in the scroller. Check it with Firebug.

3 May 2009, 8:05 AM
What is the reason for this behaviour? AutoHeight != autoHeight + autoWidth

3 May 2009, 8:19 AM
Unfortunately for grids: autoHeight == autoHeight + autoWidth.

It's a bug (http://www.extjs.com/forum/showthread.php?t=15499) that's been present since 2.0, but it's almost impossible to fix, because most browsers don't support overflow-x:auto + overflow-y:visible.

The fix in the linked bugreport works for grids with static heights (so, no row expander) and I didn't add support for adding/removing rows (but that could be done).

3 May 2009, 8:32 AM
I would say then implement that and the browsers that do not support that CSS combination don't get the fix.

We should not all suffer because of some browsers.

3 May 2009, 9:13 AM
Maybe some beta browsers like FF3.5 or Safari4 will render overflow-y:visible+overflow-x:auto correctly, but all current browsers don't render this combination correctly (IE6 is actually the only browser that generates a usable result!).

Test page can be found here (http://www.brunildo.org/test/Overflowxy2.html).

4 May 2009, 10:30 AM
As suggested above, the workaround is to provide a height for your Grid.

4 May 2009, 10:58 AM
I'll modify the example in the book then. I was trying to show how autoHeight:true works, but learned when resizing columns, you could easily break the grid. :(

11 Jun 2009, 11:58 AM
This is a lousy bug! My requirements will not allow me to use a static height. This is a design flaw in the grid and must be fixed.

Surely, there is an alternative resolution to this.


11 Jun 2009, 9:24 PM
As noted in this post http://extjs.com/forum/showthread.php?p=324465#post324465

It's not really possible to implement a decent cross browser solution until overflow-x and overflow-y are properly supported.

12 Jun 2009, 12:41 PM
Overflow-x and overflow-y are supported in Internet Explorer 6.x+, Firefox 1.5+, recent versions of Safari, and the beta of Opera 9.5. Are there other widely used browsers that don't support them?

What support for these standards do you require for this problem to go away?


12 Jun 2009, 10:37 PM
You need:

overflow-x: auto; overflow-y: visible;
which is treated by all browsers (except IE6) like:

overflow: auto;
(see reference chart (http://www.brunildo.org/test/Overflowxy2.html))