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.

Answer 1

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.