High Performance Large List component - UxBufferedList

[norabora]

I found a bug.
If there is only one item. selectedCls is not applied.
It seems that bottomItemRendered is 0, so getNode returns null.
I changed source a little bit like below and it is solved.

isItemRendered: function(index) {
// Trivial check after first render
if (this.store.getCount() == 1) return true; // modified. because if count is 1, bottomItemRendered is 0.
return this.bottomItemRendered > 0 ?
index >= this.topItemRendered && index <= this.bottomItemRendered : false;
},

I'm not sure this fix is safe though...

[kgilb]

Another request to put this on github.

I've made some of my own modifications to the source and being able to have a branch that I can merge with the master changes would be fantastic.

For instance i've added support for my own custom CSS class in the item template:

 
    // custom item class to be added to each item
   itemCls: '',

    // override
    initComponent: function () {
        this.itemTplDelayed = new Ext.XTemplate('<div class="x-list-item ' + this.itemCls + '"><div class="x-list-item-body">' + this.itemTpl + '</div></div>').compile();
     ......

And then I wanted to add the item disclosure support, but I wanted to be able to do it after the component was already defined so I refactored the initComponent to call rebuild template so you can change the template at run time (for instance if you add/remove an onItemDisclosure function).

  initComponent: function () {
        this.rebuildTemplate();
  // ... 
 },

    rebuildTemplate: function(){
        // onItemDisclosure support
        this.itemTplDelayed = '<tpl for="."><div class="x-list-item ' + this.itemCls + '"><div class="x-list-item-body">' + this.itemTpl + '</div>';
        if (this.onItemDisclosure) {
            this.itemTplDelayed += '<div class="x-list-disclosure"></div>';
        }
        this.itemTplDelayed += '</div></tpl>';
        this.itemTplDelayed = new Ext.XTemplate(this.itemTplDelayed).compile();

    },

Now I'm in the process of merging build 14 of the source back into my changes. It's not hard to do, but github would make this much easier.

Thanks for all the work on this!

[MahlerFreak]

Ok, by popular demand I've created a GitHub repository for the component. You can find it here:

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

Right now, it has exactly the same code as UxBufList014.zip in the first thread post. I'll be pushing some additional fixes in the next couple of days.

This is my first project on GitHub, and indeed it's the first time I've used a SCCS in more than 10 years, so let me know if there's anything I should be doing different to configure it, etc.

[MahlerFreak]

The enhancements by gcallahan and a fix for the bug found by norabora have been posted to github as version 0.15.

[norabora]

New bug in 0.15.
if group header is unicode. pinHeader show escaped string like %U3131.
If I remove escape in UxBufList.js, it is ok.

[norabora]

Another bug.
If I select some items and do filter which includes the selected item,
addCls of null error occured.

To test add below code after loadData,

list.getSelectionModel().select(0);
list.store.filter('album', 'A');

I followed the stacktrace.

filter() -> AbstractStoreSelectionModel.refresh() ->
if toBeSelected.length > 0, doSelect(toBeSelected) ->
... -> onItemSelected -> getNode ->
isItemRendered returns null because this.all.elements.length is 0 at that point.

I tried to override onItemSelect with null check just like onItemDeselect,
the error is not happend but selectedCls is not applied.

I'll post if I find better solution.

[norabora]

When I use bufferedList with group header.

loadData -> scroll up a little bit -> scroll down so scroll pos will be 0
-> PinHeader and group header both shown.

Usually it doesn't matter but I added shadow css to group header, so it look a bit different.

To fix this, I changed the code in UpdateListHeader()

if (groupTop > scrollPos) {
this.transformedHeader = true;
transform = (scrollPos + this.headerHeight) - groupTop;
Ext.Element.cssTranslate(this.header, {x: 0, y: -transform});
// make sure list header text displaying previous group
this.updateHeaderText(this.getPreviousGroup(headerNode.innerHTML).toUpperCase());
}
else if (groupTop < scrollPos) { // modified. original code didn't have if condition.
this.updateHeaderText(headerNode.innerHTML);
if ( this.transformedHeader ) {
this.header.setStyle('-webkit-transform', null);
this.transformedHeader = false;
}
}

I'm not sure this fix is safe. Will anyone verify this, please?

[norabora]

I tried to make a page with BufferedList and 'More' button.

When I click 'More' button, list.store.loadData(array, true) will called so array will be added to the old list.

but if I test it like 'click more' -> scroll down to end -> 'click more' -> scroll down to end' ...

The buffered list starts to be blank after loadData. and it shows up again when scroll starts.

specially the items count exceeds maxItemlength.

I tried to debug but it is hard... Any help will be appreciated.

[hitman01]

How can use Ext.XTemplate.from('contentListTemplate') with BufferedList?

app.views.newList = Ext.extend(Ext.ux.BufferedList, {
cleanupBoundary: 50,
minimumItems: 10,
maxItemHeight: 75,
blockScrollSelect: true,
batchSize: 10,
itemTpl: Ext.XTemplate.from('contentListTemplate'),
store: app.stores.contacts,

onItemDisclosure: function (record) {
},
});

[norabora]

I never tried Ext.XTemplate.from() but I saw at the first post in this thread,

'...itemTpl should be specified only as a string, not as an XTemplate...'