Как обрабатывать события прокрутки на Ext.Panels в Ext Touch (Sencha Touch)?

Question

У меня есть две Ext.Panels, одна scrollingContent, внутри другой, называемая оболочкой. Обертка меньше, чем scrollingContent, поэтому последний прокручивается горизонтально внутри своей обертки.

Я бы хотел обрабатывать события прокрутки и положение scrollingContent внутри оболочки после каждой прокрутки.

Я не нашел никакого решения для этого. Любая помощь будет очень признательна.

Заранее спасибо

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

Чтобы получить доступ к событию прокрутки оболочки, получите доступ к его Scroller после рендеринга:

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
}

Имейте в виду, что это событие будет происходить непрерывно, а не только при запуске прокрутки. Если вы хотите эту функцию, используйте вместо этого событие scrollstart.

Вот где я нашел информацию: http://www.sencha.com/forum/showthread.php?110240-How-to-add-scroll-event-to-Ext.form.FormPanel&s=a478f8ee91ba4cfde57845bf6229c902

Для получения дополнительной информации о классе Scroller и его возможностях см. Документацию API: http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Scroller