Q:

Infinite scrolling on extJS local data store

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

A:

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.

A:

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.

