Extjs buffered store loads all new added items

Question

I am trying to use Ext's (4.1.1) buffered store/grid combination with data, which I cannot access directly through a rest Api.. or so, but the incoming data is handled by my controller and want just add this data to the buffered grid.

And here comes the problem, when I load 500 items directly to the store, the buffering is working.. Only items which I can see gets rendered, but when I start to store.add(items) then they all gets automatically rendered..

So this is my store & grid:

Store

this.store = Ext.create('Ext.data.ArrayStore', {
    storeId: 'reportDataStore',
    fields: [
        { name: 'html'}
    ],
    buffered: true,
    pageSize: 100,
    autoLoad: true
});

Grid

  {
      xtype: 'gridpanel',
      flex: 1,
      hideHeaders: true,
      store: this.store,
      verticalScroller: {
          rowHeight: 43
      },
      disableSelection: true,
      columns: [
          { header: '', dataIndex: 'html', flex: 1 }
      ]
  }

Data Controller

...
// somewhere in initialization process of the controller, 
// I take the reportDataStore, for later reusing
    this.reportDataStore = Ext.getStore('reportDataStore');
...
onNewData: function(data) {
    this.reportDataStore.add(data)
}

So my expectation was, that data will get into the store, but only the visible data will get rendered.. Now it is so, that all new data gets rendered.

score 2 · Accepted Answer · answered Oct 06 '15 at 19:26

2

I wasn't able to produce a working example with the code you give, but I've got something close... How did you even manage to add records to a buffered store backed by a memory proxy?

You should try to push your new data to the proxy directly, and then reload the store, like so:

store.proxy.data.push(data);

grid.view.saveScrollState();

// should probably have been a call to reload(), but then the loading never ends...
store.load({
    callback: function() {
        grid.view.restoreScrollState();
    }
});

See this fiddle that tries to reproduce your setup.

answered Oct 06 '15 at 19:26

rixo

23,815
4
63
68

Thanks a lot, this seams to be what I am looking for, but I have some misunderstanding whats going on with the pageSize ( it works best, when the pageSize is the max of possible items) and the sorting is not working, need to implement it by my self on the `store.proxy.data` array.. Or could you maybe show how to sort on the id (DESC) – webdeb Oct 08 '15 at 09:42
Buffered stores use a pageMap to keep in memory pages of size pageSize (see the relevant part in the [constructor](http://docs.sencha.com/extjs/4.1.1/source/Store.html#Ext-data-Store-method-constructor)'s code). Unfortunately, the memory proxy is a really light implementation that doesn't support paging (see the [code](http://docs.sencha.com/extjs/4.1.1/source/Memory.html#Ext-data-proxy-Memory-method-read)). That's why we need a huge pageSize in the store (greater than the total number of records, or it will break). – rixo Oct 10 '15 at 10:30
As you have noted, it doesn't support sorting either. I had forgotten that it existed in Ext 4.1, but you should try with a [PagingMemoryProxy](http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.ux.data.PagingMemoryProxy) instead, which supports both paging and sorting (once again, you should give a look to the code). – rixo Oct 10 '15 at 10:32
Thank rixo, I did. It looks really promisingly ;) Thank you for the point with PagingMemoryProxy, will take a look at it – webdeb Oct 13 '15 at 21:34

Extjs buffered store loads all new added items

Store

Grid

Data Controller

1 Answers1