ExtJS 4.1.0 grid performance issue

Question

I am using an ExtJS grid with 50 columns and more than 1000 records. I am facing performance issues while scrolling vertically/horizontally and for cell editing. Is it possible to get smooth performance without pagination for this size of data, or is pagination the only solution?

Answer 1

You should use infinite scolling. This allows you to display your table with 1000 records, while they are not created in the dom, so they are not slowing down your browser.

Look at this example in the docs.

You need to define a buffered store and configure the parameters for infinite scrolling, like this:

Ext.define('Test.store.Owners', {
    extend: 'Ext.data.Store',
    model: 'Test.model.PersonalInfo',
    autoLoad: true,
    buffered: true,
    pageSize: 25,
    purgePageCount: 5,
    leadingBufferZone: 5,
    trailingBufferZone: 5,
});

Your backend must support pagination and return a json object including the totaland offset properties. Example:

{"total":"1003",
"offset":225,
"data":[
    {"id":"227","name":"Candice","address":"P.O. Box 247, 7586 Eget Av.","state":"Minnesota"},
    {"id":"228","name":"Benedict","address":"P.O. Box 664, 7028 Vitae Rd.","state":"FL"},
    ...
}

My answer is for ExtJs 4.2.2, I don't know if there is a difference with the version 4.1.