1. #1
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    92
    Vote Rating
    1
    Tom23 is on a distinguished road

      0  

    Default autoScroll: 'x' / 'y'

    autoScroll: 'x' / 'y'


    I've come across situations where I need a Panel with vertical autoscrolling only.

    Here is how I implemented it:
    Code:
    Ext.Element.prototype.setOverflow = function(v, axis) {
        axis = axis ? axis.toString().toUpperCase() : '';
        var overflowProp = 'overflow';
        if (axis == 'X' || axis == 'Y') {
            overflowProp += axis;
        }
        if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
            this.dom.style[overflowProp] = 'hidden';
            (function(){this.dom.style[overflowProp] = 'auto';}).defer(1, this);
        }else{
            this.dom.style[overflowProp] = v;
        }
    };
    
    Ext.override(Ext.Panel, {
        setAutoScroll : function() {
            if(this.rendered && this.autoScroll){
                var el = this.body || this.el;
                if(el){
                    el.setOverflow('auto', this.autoScroll);
                }
            }
        }
    });
    Now you can simply use
    Code:
    autoScroll: 'x'
    // OR
    autoScroll: 'y'
    // OR
    autoScroll: true // works just as before
    in your panels. Would be nice to see this in the nex Ext version

    ( AFAIK, all major browsers support overflow-x and overflow-y )

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    The chart you reference clearly mentions that no browser correctly handles visible in combination with hidden/scroll/auto (which is a major problem for GridPanel autoHeight).

    So your solution is only suitable for elements that are overflow:hidden.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    92
    Vote Rating
    1
    Tom23 is on a distinguished road

      0  

    Default


    Absolutely right. At least it works if the default CSS file (or an equivalent) is used ...


    Code:
    // ext-all.css 
    .x-panel-body{overflow:hidden!important;}

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    40
    Vote Rating
    0
    jnadler is on a distinguished road

      0  

    Default


    Tom thanks for this. Very useful, just solved a problem for me where natural Ext layout behavior caused a hscroll to appear whenever a vscroll is triggered even though the hscroll should not be needed.

    This should be built-in to Ext.

Thread Participants: 2