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
});

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
});

• javascript
• extjs

Share Improve this question Follow edited Aug 19, 2010 at 19:22 Anurag 142k3737 gold badges222222 silver badges261261 bronze badges asked Aug 19, 2010 at 12:57 herve.rtherve.rt 111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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(p) {
          // p is this Ext.Component == wrapper
          p.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./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./deploy/touch/docs/?class=Ext.util.Scroller