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?

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