如何在Ext Touch(Sencha Touch)的Ext.Panels上处理滚动事件？

Question

我有两个Ext.Panel,一个是scrollingContent,另一个叫做wrapper.包装器不如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