1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

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

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


    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?

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    73
    Vote Rating
    0
    SilveR316 is on a distinguished road

      0  

    Default


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

    PHP Code:
    <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"width160sortabletruelocked:falsedataIndex'company'},
            {
    header"Price"width75sortabletruerendererExt.util.Format.usMoneydataIndex'price'},
            {
    header"Change"width75sortabletruedataIndex'change'},
            {
    header"% Change"width75sortabletruedataIndex'pctChange'},
            {
    header"Last Updated"width85sortabletruerendererExt.util.Format.dateRenderer('m/d/Y'), dataIndex'lastChange'}
        ]);
        
    cm.defaultSortable true;

        var 
    grid = new Ext.grid.GridPanel({
            
    el'test',
            
    dsds,
            
    cmcm ,
            
    width300,
            
    autoHeighttrue,
            
    autoExpandColumn'company',
            
    title'test grid'
            
    });

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

    </script> 

  4. #4
    Ext User piskui07's Avatar
    Join Date
    Oct 2007
    Posts
    63
    Vote Rating
    0
    piskui07 is on a distinguished road

      0  

    Default Same problem

    Same problem


    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?

  5. #5
    Ext User
    Join Date
    Jan 2008
    Posts
    41
    Vote Rating
    0
    FxMan is on a distinguished road

      0  

    Default [2.0] notice the same bug

    [2.0] notice the same bug


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

  6. #6
    Ext User piskui07's Avatar
    Join Date
    Oct 2007
    Posts
    63
    Vote Rating
    0
    piskui07 is on a distinguished road

      0  

    Default


    bump

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try the following override:

    Code:
    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)

  8. #8
    Ext User
    Join Date
    Jan 2008
    Posts
    41
    Vote Rating
    0
    FxMan is on a distinguished road

      0  

    Default


    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:
    Code:
    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);
        }

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by FxMan View Post
    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:

    Code:
    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);
        }
    });

  10. #10
    Ext User
    Join Date
    Jan 2008
    Posts
    41
    Vote Rating
    0
    FxMan is on a distinguished road

      0  

    Thumbs up


    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....