High Performance Large List component - UxBufferedList

[MahlerFreak]

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

[profunctional]

Hi, thanks for this. In the BufListGrpHdr example, if I set the indexBar: false, it breaks. How do we run the example without the index bar?

[MahlerFreak]

BufList.html is set up to work without groups or index bar.

Edit: did you want group headers but not index bar? I honestly didn't think of that, but it could probably be done pretty easily ...

[SunboX]

Could this be used to build a " High Performance Large PICKER component" too? If so, where should i start?

[MahlerFreak]

I suppose it could be - what does the application look like? I have minimal time to enhance this any further at present, but I might be able to make general suggestions ...

[SunboX]

I did have a Picker containing a dataset of 1000 items. It shows 3 items per page. If i tap on the belonging select field, the picker (the scroller inside the picker) takes some seconds to render and if i flip (scroll) through the "pages" it´s very slow. :/
I have a seconds Picker with (only) 60 items, its a lot faster, lets say super fast. That drives me crazy, can´t finish my app. That picker with 1000 items isn´t usable.

[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