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'
            }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,543
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    Answers
    1
    perry_jia is on a distinguished road

      0  

    Default


    if the scrollble direction is horizontal, I tried and no use.


  5. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    4
    Vote Rating
    1
    coladarci is on a distinguished road

      1  

    Default


    Hey Mitchell - while the above code executes without error, I'm having a problem with long lists that I'm hoping you can help with. The idea is that when I show the list, I load the store, when the store is loaded, I want to scroll to the bottom. (It's a chat log with the newest chats at the bottom).

    If I call "scrollToEnd" as the callback of the store.load(), it doesn't do anything (I'm assuming because the list hasn't been updated yet). If I set an absurdly long timeout (for testing's sake) and then call scrollToEnd, it scrolls about 75% of the way to the bottom. I've found two ways to "fix" this, though neither are actually going to work in practice:

    1) in my console, if I call refresh(), then scrollToEnd(), refresh(), scrollToEnd() a few times, it makes its way there.
    2) if the user has scrolled on their own, then I call scrollToEnd(), it works *perfectly*.

    I found reference to this in an old ticket and the solution was to call updateBoundary, but that has been replaced with "refresh" and lead to my first hack (http://stackoverflow.com/questions/6...lly-just-befor)

    As vague as this is, I'm at a standstill, so I'm hoping you can help point me in the right direction.