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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar