PDA

View Full Version : Monitoring position of list, to do pre-fetching of items



johnwards
9 Nov 2010, 3:14 PM
As suggested in my earlier topic (http://www.sencha.com/forum/showthread.php?115094-Advice-on-a-load-more-button&p=536430#post536430), I would like to load in more items to a list as the user gets near the end of the list.

I thought that hooking into the move event on the list would be what I was looking for but that only fires once on render and when I scroll it isn't firing.

Is it possible to catch the scroll event? Should I be rolling my own JS for this?

Steffen Hiller
9 Nov 2010, 7:30 PM
I just checked the source and it looks like that the Ext.util.Scroller fires the scrollend, scrollstart, scroll, bouncestart and bounceend event.

In the initComponent of your cmp, try to set something like this.scroller.on('scrollend', function () {
// load action here
});

Either way check the docs and source for Ext.util.Scroller.

Hope that helps.

johnwards
10 Nov 2010, 4:25 AM
Hmm it seems that the scroll property is protected somehow. I do a console.log on (this) and I can see the property. If I do a console.log on (this.scroller) i get an undefined variable.

Does it have a getter at all? i've tried getScroller...

johnwards
10 Nov 2010, 4:44 AM
Ah ha cracked it. It needs to be done after render.

so I've done this.


afterRender: function(){
this.scroller.on('scroll', function (comp, offset) {
console.log(offset);
});
myapp.views.AdvertList.superclass.afterRender.call(this);
}

Not sure if i need the last line, i'm still getting to grips with all this Ext.js stuff.