Ext JS store unexpectedly reloads data when it should be buffered

Question

We are trying to work off of this example: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/buffer-grid.html

e.g. in the store:

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    id: 'store',
    pageSize: 50,
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    // never purge any data, we prefetch all up front
    purgePageCount: 0,
    model: 'ForumThread',
    proxy: {
        type: 'memory'
    }
});

//and in the grid:
...
store: store,
verticalScroller: {
    xtype: 'paginggridscroller',
    activePrefetch: false
},
loadMask: true,
...

But when we scroll past pageSize records in the grid, we get a long pause which is more than just the next set of records being rendered -- the store itself is reloading the data from our web service. A call to our web service loads ALL of the data and we don't want it to get re-loaded when the user scrolls. We want the RENDERING to be buffered, but not the data loading, just like the example states "his example illustrates loading of all the records up front and buffering the rendering." Primarily because we want to avoid moving sorting and ordering to the server at this point but also for performance. Yet we also don't want everything rendering right away because that leads to the dreaded long running javascript error in IE8. Any thoughts on what could be causing the store to re-query the data source in this mode?

Answer 1

If you want all records loaded and only rendering buffered then you need to set buffered:false on the store plus you need to use buffered grid view renderer.

Answer 2

You could load all the records in one store when the page loads (allRecordStore), but use another store for the grid (gridStore) populated with records from allRecordStore and using getRange when the user is paging through the grid.

You can use the beforechange listener on the PagingToolBar of your grid (that you attached to its bbar config option).

Within this listener, you would do something like:

//you've probably have already shown items 0,19 when the page loaded        
var items = allRecords.getRange(20, 40); 
gridRecords.load(items);

Obviously, you would need to implement a logic to keep track of the index (is the user viewing record 80 to 100, 20 to 40, etc.) by looking at the variable start of the page parameter of the beforechange listener. start is the name I chose in the config option paramNames of my store

That's how I'd do it, but then again most of my experience is with 3.x, maybe there are easier ways of doing it with 4.x