How to handle scroll events on Ext.Panels in Ext Touch (Sencha Touch)?

Question

I have two Ext.Panels, one the scrollingContent, inside another, called wrapper. Wrapper is less large than scrollingContent, so the latter scrolls horizontaly inside his wrapper.

I would like to handle scroll events and the position of scrollingContent inside wrapper after each scroll.

I did not find any solution for this. Any help would be really really appreciated.

Thanks in advance

var scrollingContent = new Ext.Panel({
    id: 'p1',
    layout: 'hbox',
    width: 1200,
    height: 380,
    //cls: 'blue',
    items: itemList
});

var wrapper = new Ext.Panel({
    id: 'p2',
    scroll: 'horizontal',
    width: 800,
    height: 380,
    cls: 'gray',
    items: scrollingContent
});

Answer 1

To access the scroll event of wrapper, access its Scroller after it renders:

var wrapper = new Ext.Panel({
    id: 'p2',
    scroll: 'horizontal',
    width: 800,
    height: 380,
    cls: 'gray',
    items: scrollingContent,

    listeners: {
       afterrender: function(comp) {
          // comp is this Ext.Component == wrapper
          comp.scroller.on('scroll',handleScroll);
       }
    }
});

/**
* Called when wrapper scrolls
*/
function handleScroll(scrollerObject,offsetObject) {
     // Do your stuff here
}

Be aware that this event will fire continuously, not just when the scroll starts. If you want that functionality, use the scrollstart event instead.

Here's where I found the info: http://www.sencha.com/forum/showthread.php?110240-How-to-add-scroll-event-to-Ext.form.FormPanel&s=a478f8ee91ba4cfde57845bf6229c902

For more information on the Scroller class and what it exposes, see the API doc: http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Scroller