How to use scrollToEnd ?

[mrunal]

Hi frnz ,

I'm using

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

pan.scrollToEnd(scroller);

scroller.scrollToEnd(this);

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

[mitchellsimoens]

Here is a little example:

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

[perry_jia]

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

[coladarci]

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.