1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default Scroll top down for Panel like Tabpanel

    Scroll top down for Panel like Tabpanel


    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 ?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Element.scrollIntoView does not animate. It should!

    Meanwhile try this override

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

  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Hi

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

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

Similar Threads

  1. setting scroll top in grid
    By aseem_jain in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 17 Jun 2009, 1:51 AM
  2. TextArea Scroll to Top
    By DirtDog in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 1 Jun 2009, 11:09 AM
  3. Replies: 2
    Last Post: 6 Mar 2009, 11:48 AM
  4. Top Left coordinates after scroll
    By rwankar in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Feb 2008, 2:02 AM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi