Comment gérer les événements de défilement sur Ext.Panels dans Ext Touch (Sencha Touch)?

Question

J'ai deux Ext.Panels, un scrollingContent, à l'intérieur d'un autre, appelé wrapper. Wrapper est moins grand que scrollingContent, donc ce dernier défile horizontalement à l'intérieur de son wrapper.

Je voudrais gérer les événements de défilement et la position de scrollingContent à l'intérieur du wrapper après chaque défilement.

Je n'ai trouvé aucune solution pour cela. Toute aide serait vraiment très appréciée.

Merci à l'avance

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

Pour accéder à l'événement de défilement d'emballage, accéder à son Scroller après qu'elle rend:

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 
} 

Soyez conscient du fait que cet événement se déclenche en permanence, et pas seulement lorsque le défilement départs. Si vous voulez cette fonctionnalité, utilisez plutôt l'événement scrollstart.

est ici où j'ai trouvé l'info: http://www.sencha.com/forum/showthread.php?110240-How-to-add-scroll-event-to-Ext.form.FormPanel&s=a478f8ee91ba4cfde57845bf6229c902

Pour plus d'informations sur la classe Scroller et ce qu'il expose, voir l'API doc: http://dev.sencha.com/deploy/touch/docs/?class=Ext.util.Scroller