PDA

View Full Version : Infinite Scrolling and Paging?



MahlerFreak
7 Dec 2011, 12:58 PM
Hi,

I've been taking a look at porting my custom "large list" component:

http://www.sencha.com/forum/showthread.php?121225-High-Performance-Large-List-component-UxBufferedList

over to ST2, and adding in automatic data paging as well, essentially creating the Touch version of the ExtJS4 infinite grid. But in beginning to work with ST2, I notice immediately that there is an "infinite scroller" in the source, which looks suspicious :) but appears not to be used anywhere else yet in the code. I also note that the ST2 data store has built-in support for buffered paging. If there are plans to implement this kind of infinite list component natively, I would definitely prefer not to spend a week or so of my time porting/extending my old code! If the Sencha folks aren't comfortable stating plans publicly, maybe you can send me a private PM?

Thanks much,

Scott

michal.smolinski
9 Dec 2011, 1:56 AM
Inspired by your buffered list component for Touch 1.1 I created my own implementation of similar concept for Touch 2 PR2. It's not finished yet but it's quite usable right now so I decided to share it with you. I think it may be a good starting point for further development of more feature-rich component.

Supported features:
* Scrolling :)
* Automatic item height calculations
* Orientation change support (more-or-less...)

Restrictions:
* Currently all items must have the same height for the list to work properly.

Features not supported (but nice to have in the future):
* Grouping
* Index bar

Original list features removed by purpose:
* Disclosure and item icon. I don't need them in my project so I overrided the getItemElementConfig method in order to simplify the DOM (Now each list element is dead simple div).

Known problems:
* When data store used for feeding the list is armed with sorters and you click on a list item to edit it (providing itemtap handler), then you edit the element in a way that it's index in store will change aftesorting again, then after returning back to the list there will be selection remaining at the edited item's original list index. Solving this is probably rather simple but so far I haven't had time to do it and it's low priority for me now.
* Probably more...

Attached is the source code. If you find it useful please contribute bug fixes or enhancements. Licensed under CC-BY. Kudos appreciated :)

Cheers,
Michal

MahlerFreak
9 Dec 2011, 9:44 AM
Very nice, Michal.

I started working on a port myself yesterday, and some of this will come in very useful :) The 2.0 dataView architecture is quite different, and requires a fair amount of code change. For me, grouping, headers, disclosure, etc are all useful, so I will continue to work on getting those in. Also, I'm finding that support for paging stores is a must, so I'll work on that too.

One thing I note about your implementation is that you are removing DOM nodes during the scroll callback. In my work on the 1.1 version, removing nodes from the list during scrolling significantly impacted scrolling behavior, which is why node removal was delegated to a "background task". Perhaps with the different implementation of scrolling in 2.0, this is less of a problem.

Surykat
2 Jan 2012, 12:42 AM
Any further moves during development of those incredible functionality? In my opinion, this performance thing should be implemented in sencha itself..

I'm waiting for any optimalization. I'm now working at another functionality, but buffered list would help me to avoid one of the most key features of my application (working with list with > 10000 records).

Thanks in advance!

MahlerFreak
2 Jan 2012, 7:37 AM
In my spare time, I'm building a version that will do data paging, so that records can be transferred incrementally. It will also support grouping. I'm targeting the end of next week for initial release.

roycyang
6 Apr 2012, 4:16 AM
Hi guys any update on the buffered list front? I know this is a couple months old...