How to scroll to the bottom of a container - sencha-touch-2.3

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);