Buffered grid Ext JS 5.0 slower than 4.0.1

Question

Preferably I use the latest version of Ext JS, but when looking at the examples of the buffered grid of Ext JS 5.0 and Ext JS 4.0.1 I see a clear difference in the loading speed. When scrolling fast through the data the 4.0.1 version is really smooth, but the 5.0 takes some time to load.. this loading time causes a white screen after each scroll. Which is in my opinion not very pretty.

Example 5.0: link

Example 4.0.1: link

Any clue what is causing this, and whether it can be prevented.

Answer 1

The example you're looking at http://dev.sencha.com/extjs/5.0.0/examples/grid/buffer-grid.js does not used a buferred store, for some reason.

You can replace the store in the example with a buffered one (see this fiddle):

var store = Ext.create('Ext.data.BufferedStore', {
    groupField: 'department',
    model: 'Employee',
    autoLoad: true,
    proxy: {
        type: 'memory',
        data: function() {
            var data = [];
            createFakeData(5000, data);
            return data;
        }()
    }
});

Then you'll see that the rendering is indeed fast. Unfortunately, the grid as it is configured in this example also becomes broken on the edges... Can't tell if it is because of some misconfiguration or if maybe support for infinite grid is not top notch yet in Ext5 (that would explain why they didn't finish the example in the first place).