Scroll top down for Panel like Tabpanel

[tomalex0]

Hi,
In tabpanel we have an option enableTabScroll and animScrollto provide scroll option if its items exceeds.
How could we implement same functionality for a panel like scroll top and down depending on the item count ?

[Animal]

Element.scrollIntoView does not animate. It should!

Meanwhile try this override

Ext.override(Ext.Element, {
    /**
     * Scrolls this element into view within the passed container.
     * @param {Mixed} container (optional) The container element to scroll (defaults to document.body).  Should be a
     * string (id), dom node, or Ext.Element.
     * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
     * @param {Boolean} animate (optional) True to animate the scroll. Or an object containing<ul>
     * <li> callback: Function to call on completion.</li>
     * <li> scope: Scope (<code>this</code> reference) in which to execute the callback.</li>
     * <li> duration: Duration in milliseconds of animation.</li>
     * <li> easing: The easing type.</li>
     * </ul>
     * @return {Ext.Element} this
     */
    scrollIntoView : function(container, hscroll, animate){
        var z = new Number(0),
            c = Ext.getDom(container) || Ext.getBody().dom,
            el = this.dom,
            o = this.getOffsetsTo(c),
            ct = c.scrollTop||z,
            cl = c.scrollLeft||z,
            l = o[0] + cl,
            t = o[1] + ct,
            b = t + el.offsetHeight,
            r = l + el.offsetWidth,
            ch = c.clientHeight,
            cb = ct + ch,
            cr = cl + c.clientWidth,
            to = [cl, ct];  // scrollLeft and scrollTop end animation values

        if (el.offsetHeight > ch || t < ct) {
            to[1] = t;
        } else if (b > cb){
            to[1] = b-ch;
        }

        if(hscroll !== false){
            if(el.offsetWidth > c.clientWidth || l < cl){
                to[0] = l;
            }else if(r > cr){
                to[0] = r - c.clientWidth;
            }
        }

//      No scrolling needed. Just call any specified callback immediately and return.
        if (to[0] == cl && to[1] == ct) {
            Ext.isObject(animate) && animate.callback && animate.callback.call(animate.scope || window);
            return;
        }

        if (animate && Ext.lib.Anim) {
            var d, cb = null, e;
            if (Ext.isObject(animate)) {
                d = animate.duration;
                cb = animate.scope ? animate.callback.createDelegate(animate.scope) : animate.callback;
                e = animate.easing;
            }
            Ext.fly(container).animate({scroll: {"to": to}}, d, cb, e, 'scroll');
        } else {
            c.scrollLeft = to[0];
            c.scrollTop = to[1];
        }
        return this;
    }
});

[tomalex0]

Hi

Thanks for your help, i have gone through the code and sort out another method to accomplish my requirement.

Ext.onReady(function(){ 
    
    var p = new Ext.Panel({ 
        title: 'My Panel', 
        renderTo: 'container', 
        //autoScroll:true, 
        width:400, 
        id:'mainpanel', 
        height:500, 
        footer: true, 
        tbar:[{ 
            text:'Up', 
            handler:function(){ 
                //console.log(p.body.getScroll()); 
                p.body.scroll('up',120,true); 
            } 
        }], 
        bbar:[{ 
            text:'Down', 
            handler:function(){ 
                 //console.log(p.body.getScroll()); 
                 p.body.scroll('down',120,true); 
            } 
        }], 
        items:[{ 
            xtype:'panel', 
            title:'First', 
            id:'first', 
            border:true, 
            header:false, 
            height:100, 
            html:'first' 
             
        },{ 
            xtype:'panel', 
            title:'Second', 
            border:true, 
            header:false, 
            height:100, 
            html:'Second' 
             
        },{ 
            xtype:'panel', 
            title:'Third', 
            border:true, 
            header:false, 
            height:100, 
            html:'Third' 
        },{ 
            xtype:'panel', 
            title:'Four', 
            border:true, 
            header:false, 
            height:100, 
            html:'Four' 
             
        },{ 
            xtype:'panel', 
            title:'Five', 
            border:true, 
            header:false, 
            height:100, 
            html:'Five' 
             
        },{ 
            xtype:'panel', 
            title:'Six', 
            border:true, 
            id:'six', 
            header:false, 
            height:100, 
            html:'Six' 
        }] 
    }); 
    p.body.on('scroll',function(e){ 
        console.log(e); 
    }); 
     
});

i would like to disable to toolbar when scroll up ends and to disable bbar when scroll down ends, i have tried to make it work with calculating height, but height varies of each browser in each Os. Is there any simple way to disable tbar and bbar based on its position.

Thanks again for your help Animal