Infinite scrolling on extJS local data store

Question

is it possible to have infinte scrolling in a extJS (4.1) grid, whose data-store is loaded manually?

myStore = Ext.create('Ext.data.Store', {
    fields:givenStoreFields,
    data: [[]],
});

myGrid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: givenColumns,
});

In my case I fetch data from the server, the data is tweaked, and then loaded into the store manually.

myStore.loadData(fetchedAndTweaked);

Since fetchedAndTweaked contains many rows, rendering is very slow, and slows the entire browser. Therefore I want to add parameters to myGryd and myStore to have "infinite" scrolling (on the data-set fetchedAndTweaked).

However: All examples I find, the dataStore has some proxy/reader etc.

//Thanks

Answer 1

You can, if you use buffered: true config on your store as described in the Ext JS 4.1.3 docs:.

buffered : Boolean Allows the Store to prefetch and cache in a page cache, pages of Records, and to then satisfy loading requirements from this page cache.

To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are determined automatically, and the range of pages needed to keep the cache primed for scrolling is requested and cached. Example:

myStore.loadPage(1); // Load page 1

A PagingScroller is instantiated which will monitor the scrolling in the grid, and refresh the view's rows from the page cache as needed. It will also pull new data into the page cache when scrolling of the view draws upon data near either end of the prefetched data.

The margins which trigger view refreshing from the prefetched data are Ext.grid.PagingScroller.numFromEdge, Ext.grid.PagingScroller.leadingBufferZone and Ext.grid.PagingScroller.trailingBufferZone.

The margins which trigger loading more data into the page cache are, leadingBufferZone and trailingBufferZone.

By default, only 5 pages of data are cached in the page cache, with pages "scrolling" out of the buffer as the view moves down through the dataset. Setting this value to zero means that no pages are ever scrolled out of the page cache, and that eventually the whole dataset may become present in the page cache. This is sometimes desirable as long as datasets do not reach astronomical proportions.

Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard records from its collection when those Records cycle out of the Store's primary collection. This is done by configuring the SelectionModel like this:

selModel: {
    pruneRemoved: false
}

Defaults to: false

Available since: 4.0.0

As noted above, you will also have to set thepageSize config on the store to what you want it.

A word of warning: you don't find any examples of local stores with infinite scrolling because the number of records to make infinite scrolling viable exceeds the number of records which you should reasonably keep in a local store.

In other words the rendering is not the only thing that slows down the browser, it's also the amount of data you are trying to process locally.

If you feel you need to implement infinite scrolling it's probably time to convert to a remotely loaded data store.

Answer 2

After an upgrade I found out that this i much easier in extJS 4.2(beta). The infinite scrolling is detached from the datastore. IE it does not matter what type of datastore you use. Also sorting is working as you want it.

store = Ext.create('Ext.data.SimpleStore',{
        autoLoad: true,
            pageSize:100,
            data:[
                []
            ], 
     }

Ext.require('Ext.grid.plugin.BufferedRenderer') 
var grid = Ext.create('Ext.grid.
             plugins: 'bufferedrenderer',
             store : store,
        }
//I load matrix data directly in the store for speed
store.loadRawData(matrixData);

The application is so much faster now.