How to scroll to the bottom of a container

Question

I have a container and I want to scroll to the bottom of it on trigger of an event. I have tried everything on Google but nothing seems to work.. These are the things that I have tried so far so that you dont waste any time:

1.

Ext.get('detailsViewId').scrollTo("top", -Ext.get('detailsViewId').getHeight());

2.

var mainContainer=this.getDetailContainer();
//I get the container here, so no error in the above line
mainContainer.scrollTo..................
mainContainer.element.scrollTo..................

and many more things from the "Developer Tools" of Chrome.

So nothing has worked yet so I am hoping that I can get something from Stackoverflow users.

Thanks in advance.

Answer 1

Sencha Touches uses a non-native ScrollableView to make containers scrollable. You can get the ScrollableView by calling the getScrollable() method on a scrollable container. This ScrollableView uses a Ext.scroll.Scroller to apply the scrolling logic.

    var scrollableView,
        scroller,
        containerList

    containerList = Ext.Viewport.add({
        scrollable: true,

        // creating a few items to make the container overflow.
        defaults: {
            style: 'background-color: hsl(180, 45%, 85%);',
            padding: 30,
            margin: 20
        },

        items: function(){ 
            var ar = [];

            for(var i = 0; i < 30; i++) {
                ar.push({ html: 'item ' + i});
            }

            return ar;
        }()
    });
    scrollableView = containerList.getScrollable();

    scroller = scrollableView.getScroller();

    scroller.scrollBy(0,99999);

The example is runnable here: https://fiddle.sencha.com/#fiddle/5pm

note: the scroller has an method called scrollToEnd, but somehow this didn't work as expected, which is why I'm using 99999 as an scrollBy y argument.

Answer 2

Here's how it works for me:

var mainContainer=this.getDetailContainer();    
var scroller = mainContainer.getScrollable().getScroller();
scroller.scrollToEnd(true);