I am trying to create a scrollable panel with lot of items in it (a panel of panels).

The issue: Not able to scroll even though all the inner panels have been rendered. The scroller always bounces back to offset (0,0)

Sanity Checks: Did a manual ScrollTo and the panel scrolls correctly. So I am assuming on the right track so far.

Investigation: Monitored the 'scroll' event. It always seems to bounce back to offset(0,0) after showing a sneak peak of the items below.

Help needed: If I can do scrollTo programmatically then the touch events should be able to respond accordingly.

Not sure if I am missing something or is it a bug or an enhancement request.

Any help is appreciated. Simple app attached to reproduce the issue

Code:
Ext.application( {
	name: 'ScrollingPanel',
	requires: ['Ext.Panel'],
	
	launch: function() {
			
		// create a scrollable
		var panel = Ext.create('Ext.Panel',{
			height: '80%',
			width: '80%',
			top: '10%',
			left: '10%',
			style: 'background-color:yellow;',
			scrollable: true,
		});
		Ext.Viewport.add(panel);


		// create some items to scroll
		for(i=0; i < 20; ++i){
			var top = (i*21) + '%';
			
			var item = Ext.create('Ext.Panel', {
				height: '20%',
				width:'100%',
				left: '0%',
				top: top,
				style: 'background-color:red;',
				html: ('Panel: ' + i)
			});
			panel.add(item);
		}
		
		THIS ONE WORKS. PANEL SCROLLED CORRECTLY. 
		The tap event returns the right item
		panel.getScrollable().getScroller().scrollTo(0, 1000);
		
		panel.getScrollable().getScroller().addListener('scroll', this.checkScroll);
		 						
		console.log("DONE");	
	},
	
	// THE SCROLL POSITION SHOWS THAT IT ALWAYS BACK TO (0,0)
	checkScroll: function(scroller, x, y){
		console.log("scroll: x:%d y:%d", x, y);
	}
	
});