ExtJS Grid slow with 3000+ records

Question

I am using ExtJS Grid and its getting pretty slow with 3000+ records. Sorting takes about 4 seconds.

I am thinking maybe to use pagination in my table. However after reading the documentation, I am still a bit unsure about how pagination works in extjs. Does this pull data from the server each time u turn a page? I would prefer that wasn't the case. I would prefer the 3000 records are saved in the browser and then what is rendered is just a portion of those rows.

Also I am using Extjs version 4.2.1. If I upgrade to version 5. will I get some performance improvements?

Unilateral

care to explain why the close vote? – Unilateral

Yes,pagination is handled by server as grid is not aware of the dataset.So depending on the start,limit params and store's totalproperty,client requests server for dataset.You can use local pagination with local sorting if that fits your requirement.To use local pagination you can use pagingmemory proxy.Here it is docs.sencha.com/extjs/4.2.0/#!/api/… – Marginate

Answer 1

Try using the buffered renderer plugin, 3000+ records is not that much, with the plugin.

Snippet from the sencha doc:

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    autoLoad: true,
    plugins: {
        ptype: 'bufferedrenderer',
        trailingBufferZone: 20,  // Keep 20 rows rendered in the table behind scroll
        leadingBufferZone: 50   // Keep 50 rows rendered in the table ahead of scroll
    },
    // ...
});

You can either use the trailing/leading buffer configs to trim your grid, or just skip them from the config. I've never needed the trimming my self

ref: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.plugin.BufferedRenderer

Monosaccharide

You can see the buffered renderer in action here. There is about 1000 records. – Increasing

thianks! And thanks Saki, your website is always great! – Unilateral

Thanks Oliver. You can comment also there, if you will. – Increasing

Answer 2

You can keep your data in the LocalStorage. It allows you to have the data stored in the browser. You'll need a data model which you fill with data from XML and store in the browser. The next time you just check if the data is stored and download it if not. The Ext Grid will work with these data well.

It works for me.

Embryologist