Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Mumbai
    Posts
    36
    Vote Rating
    2
    mrunal is on a distinguished road

      0  

    Question Answered: How to use scrollToEnd ?

    Answered: How to use scrollToEnd ?


    Hi frnz ,

    I'm using
    Code:
    var scroller = pan.getScrollable().getScroller();
    to get scroller of my panel 'pan'.

    I want to programatically scroll to bottom of the page, I can use

    scrollToEnd
    ( Object animation ) for this ryt?

    The question is what is how to do that?

    I tried
    Code:
    pan.scrollToEnd(scroller);
    Code:
    scroller.scrollToEnd(this);
    Code:
    scroller.scrollToEnd(pan);
    None of them works , I get error:

    Object [object Object] has no method 'scrollToEnd'

    Please tell me am i missing something?

    Thanks,
    mrunal

  2. Here is a little example:

    Code:
    new Ext.Container({
        fullscreen : true,
        scrollable : 'vertical',
        items      : [
            {
                xtype : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Scroll to End',
                        handler : function(btn) {
                            var cnt      = btn.up('container[fullscreen]'),
                                scroller = cnt.getScrollable().getScroller();
    
                            scroller.scrollToEnd(true);
                        }
                    },
                    {
                        text    : 'Scroll to Top',
                        handler : function(btn) {
                            var cnt      = btn.up('container[fullscreen]'),
                                scroller = cnt.getScrollable().getScroller();
    
                            scroller.scrollToTop(true);
                        }
                    }
                ]
            },
            {
                height : 200,
                html   : 'One'
            },
            {
                height : 200,
                html   : 'Two'
            },
            {
                height : 200,
                html   : 'Three'
            },
            {
                height : 200,
                html   : 'Four'
            },
            {
                height : 200,
                html   : 'Five'
            },
            {
                height : 200,
                html   : 'Six'
            },
            {
                height : 200,
                html   : 'Seven'
            },
            {
                height : 200,
                html   : 'Eight'
            },
            {
                height : 200,
                html   : 'Nine'
            },
            {
                height : 200,
                html   : 'Ten'
            }
        ]
    });