[2.0/2.0.1/2.1][OPEN] Grid autoHeight disables horizontal scrolling too

[SilveR316]

First of all, the autoScroll property on grid panel does not seem to be working. No matter what value I set it to, it does not seem to have any effect.

Secondly, why do horizontal scrollbars disappear as soon as autoHeight is set to true? It would seem that vertical scrollbars should disappear, but what if there are too many columns to view in the grid and there needs to be horizontal scrolling? Can anyone clarify if there is reason for the horizontal scrollbar disappearing too or if this is a bug?

[mystix]

maybe it'd be good if you could post your grid creation code?

also, some other details as per http://www.sencha.com/forum/showthread.php?t=13985 would be good. thanks.

[SilveR316]

- Happens in Ext r1225 from svn and both alpha 1 and beta 1 of 2.0.
- All browsers
- Tested on ext-base
- Tested on windows XP


The code I use to generate the grid is wrapped inside a helper function for symfony, so it is rather complex, but the problem can be recreated using any of the examples you have on your website. I trimmed down this example to a basic grid to show this.

Notice with the width set to 300 and autoHeight set to true, the Last Updated column gets cut off, but no horizontal scrollbars appear. The same thing happens if more columns get cut off. As soon as you specify a specific height, scrolls bars appear (both vertical and horizontal).

<div id="test"></div>
<script type="text/javascript">
Ext.onReady(function(){

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

    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);

    var cm = new Ext.grid.ColumnModel([
        {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, 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, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ]);
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el: 'test',
        ds: ds,
        cm: cm ,
        width: 300,
        autoHeight: true,
        autoExpandColumn: 'company',
        title: 'test grid'
        });

    // Render the grid!
    grid.render();
});

</script> 

[piskui07]

Hi everyone... i've the same problem, when autoHeight in on orizontal scroolbar didn't appear!
I use Ext 2.0 final release.

Any suggestion?

[FxMan]

Is this an official bug? Any solution to this problem?

[piskui07]

bump

[Condor]

Try the following override:

Ext.override(Ext.grid.GridView, {
    layout : function(){
        if(!this.mainBody){
            return;
        }
        var g = this.grid;
        var c = g.getGridEl(), cm = this.cm,
                expandCol = g.autoExpandColumn,
                gv = this;
        var csize = c.getSize(true);
        var vw = csize.width;
        if(vw < 20 || csize.height < 20){
            return;
        }
        if(g.autoHeight && !this.forceFit){
	        csize.height += this.scrollOffset;
        }
        this.el.setSize(csize.width, csize.height);
        var hdHeight = this.mainHd.getHeight();
        var vh = csize.height - (hdHeight);
        this.scroller.setSize(vw, vh);
        if(this.innerHd){
            this.innerHd.style.width = (vw)+'px';
        }
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
        }
        this.onLayout(vw, vh);
    }
});

(this is not a complete fix, because adding or removing rows doesn't automatically change the height)

[FxMan]

Hi condor... for my project your fix doesn't work. The grid grow up of 40px every time you "paging" (move to the next avaiable page of the grid).

Waiting for an official fix (I hope!!), i've also overwrite the method layout to simulate the grid autoheight. Note that "simulate" grid autoheight, so you haven't to set autoheight:true on the grid setup.
This is my code, any improvement or suggest is appreciate:

layout : function(refresh){
        if(!this.mainBody){
            return;         }
        var g = this.grid;
        var c = g.getGridEl(), cm = this.cm,
                expandCol = g.autoExpandColumn,
                gv = this;

        var csize = c.getSize(true);
        var vw = csize.width;

        if(vw < 20 || csize.height < 20){return;}
		
        if(g.autoHeight){
            this.scroller.dom.style.overflow = 'visible';
      	}else{
            this.el.setSize(csize.width, csize.height);
            var hdHeight = this.mainHd.getHeight();
            var vh = csize.height - (hdHeight);
            this.scroller.setSize(vw, vh);
            if(this.innerHd){
                this.innerHd.style.width = (vw)+'px';
            }
            var actualRowHeight = this.mainBody.getHeight()+64; //scrollbar
            c.setHeight(actualRowHeight);
            this.el.setHeight(actualRowHeight);
            this.scroller.setHeight(actualRowHeight-g.bbar.getHeight()-1); // -1 must be set here           
        }
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
        }
        this.onLayout(vw, vh);
    }

[Condor]

Hi condor... for my project your fix doesn't work. The grid grow up of 40px every time you "paging" (move to the next avaiable page of the grid).

I've modified my patch a little to account for this:

Ext.override(Ext.grid.GridView, {
    layout : function(){
        if(!this.mainBody){
            return;
        }
        var g = this.grid;
        var c = g.getGridEl(), cm = this.cm,
                expandCol = g.autoExpandColumn,
                gv = this;
        var csize = c.getSize(true);
        var vw = csize.width;
        if(vw < 20 || csize.height < 20){
            return;
        }
        if(g.autoHeight){
	        csize.height = this.mainHd.getHeight() + this.mainBody.getHeight();
	        if (!this.forceFit) {
	        	csize.height += this.scrollOffset;
	        }
        }
        this.el.setSize(csize.width, csize.height);
        var hdHeight = this.mainHd.getHeight();
        var vh = csize.height - (hdHeight);
        this.scroller.setSize(vw, vh);
        if(this.innerHd){
            this.innerHd.style.width = (vw)+'px';
        }
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
        }
        this.onLayout(vw, vh);
    }
});

[FxMan]

Thanks condor. Very very good patch!

Works great!

PS: i've only added 20px to csize.height due to a vertical scrollbar that appear (on scroller div) when go in editing mode. Yes, the paging toolbar is now 20px far to the last row... but solve my problem. If anyone have a suggest to resolve this....