Endless scrolling in local extJS datastore

Question

is it possible to have scroll in extJS grid (4.1), 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 take data from the server, the data is configured, and then manually uploaded to the repository.

 myStore.loadData(fetchedAndTweaked); 

Since fetchedAndTweaked contains many lines, rendering is very slow and slows down the entire browser. Therefore, I want to add the parameters myGryd and myStore to have an “infinite” scroll (in the fetchedAndTweaked dataset).

However : all the examples that I find, dataStore has a proxy server, etc.

//Thanks

Answer 1

You can set buffered: true configuration in your store as described here .

As indicated in the link, you also need to set the pageSize configuration in the repository so that you like it.

Edit:

A few months later I got a downward movement, probably because I did not give any warning words or tried to dissuade the OP from doing this.

I must say that you will not find examples of local stores with infinite scrolling, because the number of records to make infinite scrolling viable exceeds the number of records that you should reasonably store in local storage.

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

If you feel that you need to implement endless scrolling, it may be time to convert to a remotely loaded datastore.

Answer 2

After the update, I found out that it is much easier in extJS 4.2 (beta). Infinite scrolling is separated from the data store. IE does not matter what type of data warehouse you are using. Sorting also works the way 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); 

Now the application is faster.