PDA

View Full Version : Infinite Scrolling / Lazy scrolling in ExtJS



Ronits
28 Aug 2012, 8:42 AM
Hi All,
Would like to know, a proper implementation of infinite scrolling for grid component.
Tried out examples after googling, but unable to implement it successfully.
If anyone has implemented it, please share the piece of code, which made it to work.
I did the following to implement it :
1. Create a store, with buffered:true.
2. pageSize:10
3. proxy : memory.
4. leadingBufferzone :5.
5. Create a grid with :
selModel: {
pruneRemoved: false }, verticalScroller:{
variableRowHeight: true },
Basically, I tried to implement the example here :
http://docs.sencha.com/ext-js/4-1/#!/example/grid/infinite-scroll.html
(http://docs.sencha.com/ext-js/4-1/#!/example/grid/infinite-scroll.htmlPlease)Please let me know, if i am missing something, to get it working.

scottmartin
28 Aug 2012, 10:08 AM
Can you detail the problems you were having after trying to get this to work?

Scott.

Ronits
28 Aug 2012, 10:21 AM
Hi Scott,
Basically, there was no error to debug. But, infinite scrolling was not being implemented. Since, the entire store data was loaded at once, and an ordinary vertical scrollbar was being enabled.
I was expecting, 10-15 rows of data would be loaded, and then, when I scroll down the grid, again, the next 10-15 rows would be populated dynamically.
What, I think is, since I am using proxy type of store as 'memory', the functionality is breaking. Is that so? Because, it happened the same with pagingtoolbar.
Please help.

scottmartin
29 Aug 2012, 7:52 AM
You will need to using PagingMemoryProxy.

As for the infinite scrolling .. I do not believe it properly supports memory store.
Have look at the buffered grid example.

Scott.

Ronits
29 Aug 2012, 11:31 AM
Thanks Scott,
Will try to implement the same as soon as possible, and let all know the update, if it works.. :)