[OPEN-593] horizontal scroll bar disappear if the autoHeight is true in the grid

[ruralclimber]

Hi,

this is a bug in previous versions, and it is not resolved yet in ext 3.x.

there is a thread that once discussed this:

http://www.extjs.com/forum/showthread.php?t=15499&page=4


Will there be a scheduled fix for this.


Thx
Warren

[Jamie Avins]

I'm not sure which of those issues you are referring to. Please post a test case for the specific issue you are running into.

[ruralclimber]

Hi,

I have a grid which has lots of columns in it, so the horizontal scroll bar should be visible.

in the mean time, I want the height of the grid can auto-ajust, so the vertical scroll bar will NOT show up. In order to do so, I set autoHeight:true.

the problem is, if I set autoHeight as true, the horizontal scroll bar will never show up, and some columns will be cut off on the right


There is a good example here:
http://www.marcusschiesser.de/?p=309

the autoHeight of the grid in this page is set as true, if you increase the width of the column (drag it to make it wider), you will see that, the horizontal scroll bar will not show up.

hope this makes it clear. thx!


best,
Warren

[Jamie Avins]

Going to that site doesn't give me a clean test case for this. I assume you have this issue in a grid somewhere that you can post the code for here.

[ruralclimber]

Ok, I just customized the examples provided in extjs website.

as you can see, as long as I set the autoHeight = true, the horizontalScroll bar will not show up, and some columns are cut off on the right.





/*!

* Ext JS Library 3.1.1

* Copyright(c) 2006-2010 Ext JS, LLC

* licensing@extjs.com

* http://www.extjs.com/license

*/

Ext.onReady(function(){


// sample static data for the store

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'],

['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],

['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],

['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],

['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],

['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],

['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],

['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],

['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],

['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],

['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],

['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],

['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],

['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],

['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],

['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],

['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],

['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],

['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],

['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],

['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],

['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],

['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],

['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']

];


/**

* Custom function used for column renderer

* @param {Object} val

*/

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;

}


/**

* Custom function used for column renderer

* @param {Object} val

*/

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;

}


// create the data store

var store = new Ext.data.ArrayStore({

fields: [

{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

]

});


// manually load local data

store.loadData(myData);


// create the Grid

var grid = new Ext.grid.GridPanel({

store: store,

columns: [

{id:'company',header: 'Company', width: 320, sortable: true, dataIndex: 'company'},

{header: 'Price', width: 200, sortable: true, renderer: 'usMoney', dataIndex: 'price'},

{header: 'Change', width: 200, sortable: true, renderer: change, dataIndex: 'change'},

{header: '% Change', width: 200, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},

{header: 'Last Updated', width: 400, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}

],


width:600,

autoHeight:true,

title: 'Array Grid'


});


// render the grid to the specified div in the page

grid.render('grid-example');
});



Thx,
Warren

[evant]

This is a fairly old issue: http://www.extjs.com/forum/showthread.php?t=15499&highlight=scroll

The concensus seems to be there's no decent cross browser solution for it.