High Performance Large List component - UxBufferedList

[MahlerFreak]

Thanks for providing such a component. I tried this for populating large amount of data in a list from JSON STORE (more than 300) but after scrolling down (above 100 data's) not showing it in the list and getting scrolled with blank screen. Please help me out on this..

You'll have to be much more specific, with sample code, in order for me to help. As you can see by running the examples, or from reading this thread, this is not a problem most people are having.

[janelle]

I tried this plugin, and it actually makes my problems worse not better. It makes the scrolling much more jumpy. I fiddled with the config settings to see if it made a difference, but not really. Its much worse on the iPhone than on my Nexus S.

I have a list of images. Each list item is an image (with two little buttons overlayed on top) with the width set to 100% and the height is dynamic (img tag inside the div pushes the div to the proper height). There are only 66 items in my list at this point, but its scrolling badly already (will need to have up to 150 images).

Has anyone else done a large list of images? Is there anything I can do to make it work better....with or without this plugin?

Will the scrolling with large lists work better in Sencha 2.0?

[MahlerFreak]

The BufferedList is designed to deal with the scrolling performance degradation caused by lists with a large number of items. It does this by incrementally rendering items as you scroll, and I can believe that incrementally rendering images (as opposed to text or other faster rendering items) will cause scrolling to be worse. Note that BufferedList does not change the basic scrolling algorithms in Sencha Touch, it only manages the number of items being scrolled.

I wouldn't hold out too much hope for major improvement in 2.0. If you check out the Twitter feed example in 2.0 - http://docs.sencha.com/touch/2-0/tou...ter/index.html - you'll see an example that uses more complex markup with images included, and you'll note that it is usable but definitely not as fluid as native app scrolling. I think the ultimate answer is native browser support for scrolling overflow content - which is, in fact, supported in iOS5, but not really integrated into Sencha Touch yet. You might want to experiment with this yourself - see http://johanbrook.com/browsers/nativ...rolling-ios-5/ for one example.

[Vis]

Hi! Thanks for your list.
But I have an issue. If items in store are not ordered by "groupfield" field, groupheaders are not working correctly.
For example, store items in this order

item1 = {groupfield: '1'};
item2 = {groupfield: '2'};
item3 = {groupfield: '1'},
item4 = {groupfield: '1'},
item5 = {groupfield: '1'},

then list would look something like this:

groupheader: 1
item1
groupheader: 2
item2
item3
item4
item5

P.S. sorry for my english

EDIT: solve the problem by sorting the store

[anand.arvind]

Thanks for sharing this code.

I am trying to use this to overcome memory issues in long lists on the ipad which crashes my application and found things work. I was using XTemplates to create each item and this did not work, have to debug to see how to get this fixed (got the latest version of the code from github). I am also adding the ListPaging plugin with this to load as one scrolls down to minimize loading from the DB in one shot for long list of records (2000+), and this seems to be working except for when one clicks on the loading spinner when loading.

Will post back with the updated code and solution once it is done, see this as a must needed component in the core system for anyone using this for real data.

[prasanna_hr]

Hi,

Do you have a Sencha Touch 2 implementation of this?

Thanks
Prasanna

This is the first functionality-complete release of the list component I and others have been working on in this thread:

http://www.sencha.com/forum/showthre...dation-thread/

Ext.ux.BufferedList is designed to be used in place of the standard Ext.List component, and supports essentially all Ext.List functions and configuration parameters, while providing the following enhancements and changes:

- Adequate scrolling performance with large data sets. The attached examples use a data array of about 1400 items, while still providing similar scroll performance to Ext.List. This is accomplished by rendering a "sliding window" of list items based on current scroll position, rather than rendering all list items.
- Independent support for indexBar and group headers. By setting the standard list config parameter "grouped" to true, and the extension config parameter useGroupHeaders to false, you can use an index bar without having group headers, as some native iOS applications do. Obviously, setting useGroupHeaders to true gives you standard group headers.
- The configuration parameter "blockScrollSelect" is provided. If set to true, this prevents item selection while the list is still scrolling, so you can tap the list to stop scroll without invoking a selection - again, similar to native iOS. See the attached examples.

The only non-intuitive configuration is a parameter called "maxItemHeight". This is set at 85 pixels by default. If you have a significant number of items in the list which will be greater than this height, you should increase the value at least to the 90th percentile or so item height, to avoid potential problems with long scrolls to the top of the list. Also, itemTpl should be specified only as a string, not as an XTemplate, although this restriction may be removed soon.

I've licensed this work under either GPL or MIT, which I believe should allow for any forseeable reuse.

Please let me know of any bugs, enhancements, etc.

The attached file contains both the UxBufList.js file, and three examples demonstrating regular, indexBar, and grouped with headers lists. You will need to edit the html files to point to your sencha touch library.

Edit: I have joined the 21st Century and will not be posting updates in zip file format any longer. The latest will always be found here:

https://github.com/Lioarlan/UxBufLis...ouch-Extension

[MahlerFreak]

Hi,

Do you have a Sencha Touch 2 implementation of this?

Thanks
Prasanna

Unfortunately, no. I had a version about ready to go on top of ST2 PR3, and then there were major changes to Store, DataView, and List following PR3, which will require major rewrites and a new extension of Store. Due to a very busy schedule at a new job, I don't expect to be able to complete this any time soon.

I would hope/expect that this will be on the radar screen as core ST functionality sometime soon.

[prasanna_hr]

Can I have the code that was working on ST2PR3? We have a need to show lists of large size (100-500). I can spend some time in changing the code to work on ST2RC.
Thanks
Prasanna

Unfortunately, no. I had a version about ready to go on top of ST2 PR3, and then there were major changes to Store, DataView, and List following PR3, which will require major rewrites and a new extension of Store. Due to a very busy schedule at a new job, I don't expect to be able to complete this any time soon.

I would hope/expect that this will be on the radar screen as core ST functionality sometime soon.

[MahlerFreak]

Can I have the code that was working on ST2PR3? We have a need to show lists of large size (100-500). I can spend some time in changing the code to work on ST2RC.
Thanks
Prasanna

Prasanna,

PM sent.

Scott

[kwach]

MahlerFreak,

I'm very interested in this component. Could you please send me the code too?

I'm using PR3 right now, but I'm going to port to RC version soon. I'd gladly help with porting of the component to RC.

Thanks!