Doubtless there is a way to do this with Ext, but this is my own method of returning a scrolling panel within Sencha Touch to the “top” of the view. I did spend some time reviewing the Sencha Touch docs but the only thing that came close to the desired result was the setPosition() method which only works on floating panels. I did spend some time playing with setting the floating property of the panel and then applying setPosition() but quickly ran into undesired results.

So, as always, time is short and a solution needs to be had quickly. A few minutes later I came up with this:

// setPositionToTop(cmp):void
// This function takes the scrolling area of a panel and sets its y position to 0;
// arguments: cmp:Object, an Ext.Panel
// returns: nothing
function setPositionToTop(cmp){
	var cmpId = cmp.getId();
	var sStr = document.getElementById(cmpId).firstChild.firstChild.getAttribute('style');
	if (sStr && sStr.indexOf('translate3d') != -1){
		var temp = sStr.split(',');
		temp[1] = ' 0px';
		var newStr = temp.join(',');
		//console.log('before: ' + sStr + ', after: ' + newStr);
	document.getElementById(cmpId).firstChild.firstChild.setAttribute('style',newStr)
	cmp.doComponentLayout();
	}
}

The above is based on the following source that Sencha Touch generates:

...

It should be plain that the top-most div is the component, and that I’m traversing the DOM to the third DIV and manipulating the style attribute. In this example the webkit-transform is responsible for the position of the content div and so I’m setting the y value back to 0px thus placing it where I want – back to the top.

The interesting thing here is that without calling doComponentLayout() on the component the space that the scrolling content area occupied before changing its position is still present resulting in a scrolling area larger than desired. In a worse-case scenario you can actually scroll the content area right off the screen – never to get it back. doComponentLayout() fixes this. Simply comment that line out to see this for yourself – scroll your panel to its most extreme y position, nav away, nav back, scroll your panel up as far as you can go…. gone.

To use this function I add it to a beforecardswitch listener for the desired panel and I add an if statement to check if the panel has been rendered yet, which it won’t unless you’ve visited it previously:

beforecardswitch:function(e,o){
	if (transactionsCardDeck.getActiveItem()){
		setPositionToTop(transactionsCardDeck.getActiveItem());
        }
}

The result is that the panel’s y coordinate is reset before you return to it.