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.