High Performance Large List component - UxBufferedList

[norabora]

I answered to my 'More button' question by myself.
I added this.renderOnScroll() just below this.renderOnScroll(0) in refresh() and it fixed.
Because it shows up again when scroll starts again.

This seems like a little bit of abundant call but it works as expected so far.
(except the offset is not adjusted if there are group headers.)

[norabora]

To keep selection during scrolling,
scroll stop --> itemCleanup() --> updateItemList() --> keep previous selection.
but sometimes this doesn't work.

Because sometimes this.all.elements.length is less than cleanupBoundary so updateItemList() is not called in itemCleanup.

To fix this temporarily, I called save & restore selection in itemCleanup (outside of if condition),
but I'm not sure I'm on the right track...

[eMedTools]

Hi everyone.

I am new to Sencha Touch, and found your High Performance Large List - wow - what a find!

- I have built a prototype app with Jquery Mobile, which searches nicely, but is waaaaaay slow when working with a list of 1,000 entries, so I am trying Sencha Touch to see if that will work.

It does nearly everything I need it to, but how does one create a search function for the list?

Any assistance would be greatly appreciated.

Thanks

[norabora]

To keep selection during scrolling,
scroll stop --> itemCleanup() --> updateItemList() --> keep previous selection.
but sometimes this doesn't work.

Because sometimes this.all.elements.length is less than cleanupBoundary so updateItemList() is not called in itemCleanup.

To fix this temporarily, I called save & restore selection in itemCleanup (outside of if condition),
but I'm not sure I'm on the right track...

I found better solution.
In renderOnScroll, calling 'save & restore selection' after replaceItemList, appendItems, insertItems.
Then, after every dynamic add/remove, reselect previous selection.

[Bucs]

Great ux, performance is wonderful!

Everything is working great, list items are showing, as well as headers, but for some reason the indexBar will not show up, any ideas as to why not?

                {
                    hidden: true,
                    id: 'listMfg',
                    xtype: 'bufferedlist',
                    grouped: true, 	// optional
                    indexBar: true, 	// optional
                    useGroupHeaders: true, // no group headers
                    maxItemHeight: 30, // must specify
                    blockScrollSelect: true,
                    batchSize: 20,
                    loadingText: null,
                    store: new Ext.data.Store(
                        {
                            storeId: 'listMenuStore', 
                            model: 'MenuItem',
                            proxy: {
                                url: 'GetList',
                                type: 'ajax',
                                reader: {
                                    type: 'json'
                                }
                            },

                            getGroupString: function (record) {
                                return record.get('name')[0].toUpperCase();
                            },

                            listeners: {
                                scope: this,
                                read: function (cmp, root, recs) {
                                    Ext.getCmp('listMfg').setHeight(300).show();
                                    this.query('LoadingPanel')[0].hide();
                                }
                            }
                        }
                    ),
                    itemTpl: '{name}'
                },

Thanks!

[Bucs]

Nevermind, I had not included the indexBar in the application.scss file so it didn't generate the necessary CSS classes. All is great now...thanks again for this highly useful extension.

[tinyfactory]

This just made a project I was working on happen! Thanks so much for developing it. Any plans to implement XTemplate in the near future?

Where can I donate to keep this project going?

Keep it up!

Alexander Rolek

[vinalys]

I am really new to Sencha touch so I might make some mis-configuration here. I believe I found a few bugs which I traced by using some logs. All of them are found with the options grouped, useGroupHeader and indexBar to true:

If the items that are sorted contain caps and some others not, this is possible that there are some issues on ordering. For instance I had some items 'a' and 'L'. When displaying the list, the first row shown will be the one with L, I believe because its ASCII code comes before a.

The second issue I am facing is with non alpha characters. I add a '2', nothing will be displayed except the indexBar. This is because '2' is not contained int that indexBar. Of course the listPrefix does not help but this could be addressed by defining inside the array "letters" every characters that my list does contain as a start.

[vinalys]

I add my method to find the first issue with problems of sorting:

I added the red lines in function initGroupIndexMap:

		// build temporary map of group string to store index from store records
		for ( i = 0; i < sc; i++ ) {
            key = escape(store.getGroupString(store.getAt(i)).toLowerCase());
			if ( recmap[key] === undefined ) {
				recmap[key] = { index: i, closest: key, prev: prevGroup } ;
				prevGroup = key;
				console.log("add ix: "+i+", closest: "+key+", prev: "+prevGroup);
			}
			if ( !firstKey ) {
				firstKey = key;
				console.log("1st key: "+firstKey);
			}
		}

Which gives this output if my list contains L a M:

add ix: 0, closest: l, prev: l
1st key: l
add ix: 200, closest: m, prev: m
add ix: 400, closest: a, prev: a

For the second issue I am quite sure it comes from the remaining part of the same function that browse all items available in the indexBar including only alpha characters by default.

[realjax]

Thanks. Nice work.

In order to get the buffered list to work with an itemTpl that is an array or an instance of Ext.XTemplate (which may contain custom rendering functions) the source needs to be adjusted so the initComponent reads like this:

initComponent: function() {

        var memberFnsCombo = {};
        if (Ext.isArray(this.itemTpl)) {
            this.itemTpl = this.itemTpl.join('');
        }else if (this.itemTpl && this.itemTpl.html) {
             Ext.apply(memberFnsCombo, this.itemTpl.initialConfig);
            this.itemTpl = this.itemTpl.html;
        }
        this.itemTplDelayed = '<div class="x-list-item"><div class="x-list-item-body">' + this.itemTpl + '</div></div>';
        this.itemTplDelayed = new Ext.XTemplate(this.itemTplDelayed, memberFnsCombo).compile();


        Ext.ux.BufferedList.superclass.initComponent.call(this);

       //.. etcetera...

I'm not sure why your replaced the orginal's Ext.List tpl code:

<div class="x-list-item ' + this.itemCls + '"><div class="x-list-item-body">' + this.itemTpl + '</div>

with

<div class="x-list-item"><div class="x-list-item-body">' + this.itemTpl + '</div></div>';

?
Am I not allowed to add custom CSS rules to the items in bufferedList?