High Performance Large List component - UxBufferedList

[MahlerFreak]

Hi Benjamin,

Sorry I didn't see this sooner. I will take a look at the failure to render on read().

And thank you for the item disclosure fix - I'll incorporate that in my next "release".

Scott

[benjamin.jaton]

Actually the dockedItems are fine I just made a mistake in my code.

That would be great if you could have a look at the read() items update.
Here is a small testcase for that :

Ext.reg('mylist', Ext.ux.BufferedList);

Ext.setup({
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var data = [
        	{firstName:'John', lastName:'Lenon'},
        	{firstName:'Frank', lastName:'Zappa'}
        ];
        
        var store = new Ext.data.JsonStore({
            model: 'Contact',
            data: data
        });
        
        new Ext.TabPanel({
            fullscreen: true,
            items: [{
                xtype: 'panel',
                title: 'MyPanel',
                dockedItems: [{
                    xtype: 'button',
                    text: 'filter list',
                    handler: function(){
                        Ext.getCmp('mylist').store.filter('firstName', 'John');
                    }
                }]
            }, {
                id: 'mylist',
                title: 'MyList',
                xtype: 'mylist',
                itemTpl: '{firstName} {lastName}',
                store: store
            }]
        });
    }
});

Steps :
- Go to MyList, check that there are 2 items
- Go back to MyPanel and click on the button ( the list should have 1 item now )
- Go back to MyList, there is nothing anymore

Note : replacing the first line Ext.reg('mylist', Ext.ux.BufferedList);
by Ext.reg('mylist', Ext.List);
makes it work

[dontbugme]

First of great job on the list, it works very well apart from one issue.

After rendering the list once, when I reload the store the list appears blank - any idea how to solve this?

Basically what I am doing is, when showing the bufferedList the store is loading the data from a proxy with a letter as an argument in order to only load entries starting with this specific letter. Now this works on the first try but on the second I get the error "Uncaught TypeError: Cannot call method 'call' of undefined"

[MahlerFreak]

Benjamin,

Thanks for the example, I have some time put aside to work on this tomorrow.

Scott

[benjamin.jaton]

Hi Scott,

no problem, if you need any early testing let me know.

[MahlerFreak]

Benjamin,

Attached is a new version of UxBufList, with a fix for your update bug.

Edit: fix is now in the first post of the thread, along with subsequent fixes.

Regards,

Scott

[benjamin.jaton]

Hi Scott,

First, thank you so much for taking the time to do this, it is much appreciated.

So about the newer version of the code, it does fix the test case I sent. However a read() call on the store will still empty the list out. So I created a new testcase using a json store which is closer from what the original problem I had :

Ext.reg('mylist', Ext.ux.BufferedList); // would work with Ext.List

Ext.setup({
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var store = new Ext.data.Store({
            model: 'Contact',
            proxy: {
                type: 'ajax',
                url : 'data.js',
                reader: {
                    type: 'json'
                }
            },
            data : [
                {firstName:'John', lastName:'Lenon'},
                {firstName:'Frank', lastName:'Zappa'},
                {firstName:'Led', lastName:'Zeppelin'}
            ]
        });
        
        new Ext.TabPanel({
            fullscreen: true,
            items: [{
                xtype: 'panel',
                title: 'MyPanel',
                dockedItems: [{
                    xtype: 'button',
                    text: 'read new data',
                    handler: function(){
                        Ext.getCmp('mylist').store.read();
                    }
                }]
            }, {
                id: 'mylist',
                title: 'MyList',
                xtype: 'mylist',
                itemTpl: '{firstName} {lastName}',
                store: store
            }]
        });
    }
});

the testcase requires a data.js available :

[
	{"firstName":"Charlie", "lastName":"Chaplin"},
	{"firstName":"Sarah", "lastName":"Bernhardt"}
]

From what I can see, the refresh() method in UxBufList gets called with this.onUpdate().

[MahlerFreak]

Benjamin,

Thanks again for a clear, simple example. The attached fix fixes both of your issues, and hopefully a broad category of others as well. I was trying to be excessively clever in terms of keeping the user's scroll position when data changes occur; this really wasn't very sensible under the kind of wholesale data change scenarios you are doing.

Edit: this fix is now in the file attached to the first post in the thread, UxBufList014.zip.

Regards,

Scott

[benjamin.jaton]

Hi Scott,

Your fixes work great. I am now using it in one of my app
Thank you so much!

- Playing with it a bit I found an interesting behavior when you change the active Component while scrolling in the list :
1) Go to 'MyList' tab
2) scroll hard and quickly tap on the 'MyPanel' tab
3) wait a second (for the scrolling to complete)
4) go back to the list => no item rendered

Note : If you scroll after 4), the items show up

Here is a simple testcase as usual :

Ext.reg('mylist', Ext.ux.BufferedList);

var data = []
for (var i=0; i<600; i++) data.push({firstName: 'John'+i, lastName: 'Wayne'})

Ext.setup({
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var store = new Ext.data.Store({
            model: 'Contact',
            data : data
        });
        
        new Ext.TabPanel({
          layout:'fit',
          fullscreen: true,
          scroll:'vertical',
          items: [{
            title: 'MyPanel',
            xtype: 'panel'
          },{
            title: 'MyList',
            fullscreen: true,
            xtype: 'mylist',
            itemTpl: '{firstName} {lastName}',
            store: store
          }]
        });
    }
});

What I did in my app was enabling/disabling the scroller when I switch panels. But I guess there is a better solution.

Do you think that this component has any chance to be added to the framework ?
I'd love to have it included since it is way more efficient than the default implementation !

[MahlerFreak]

Benjamin,

I'll take a look at the component switching issue. I suspect it will be simple to fix. Thanks again for making a clear test case. I especially like the John Wayne data theme - perhaps you can come up with a SASS/CSS3 visual theme to match?

I wouldn't think this is likely to end up in the base framework. The way I'm rendering things here is outside the paradigm of the base framework components, and that has some consequences. For instance, the getNode function will always return the DOM node for a record index associated with a visible node. But it can return null for an index of a node outside the current display "window". For many applications, this has no consequence, but for some it might. There are probably some other little "gotchas" like the latest one you found. So this extension is definitely useful for applications that must perform with large lists, but it may not meet the total criteria for consistency that the Sencha folks rightly ask of all their product. As a software architect by background, I get that.

I'd also guess that the percentage of people developing on Touch that must handle large lists is relatively small. And if I were a Sencha developer/architect, I'd be hoping that advances in hardware and OS, combined with optimizations and tweaks in the Sencha scrolling code itself, will eventually obviate the need for specialized components like UxBufList.

Meanwhile, those of use who need it can use components like UxBufList where they work for us. This is the great advantage provided a large community developing and sharing extensions for each other.

Regards,

Scott