Extjs 缓冲存储加载所有新添加的项目

Question

我正在尝试使用 Ext 的 (4.1.1) 缓冲 store/grid 数据组合，我无法通过 rest Api 直接访问这些数据。 . 左右，但传入数据由我的控制器处理，只想将此数据添加到缓冲网格。

问题来了，当我将 500 件物品直接加载到商店时，缓冲工作正常。只有我能看到的物品会被渲染，但是当我开始 store.add(items) 时，它们都会被渲染自动渲染..

这是我的商店和网格：

商店

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

网格

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

数据控制者

...
// 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)
}

所以我的期望是，数据会进入存储区，但只会呈现可见数据。现在是这样，所有新数据都会呈现。

Answer 1

我无法使用您提供的代码生成一个工作示例，但我有一些接近的东西...您是如何设法将记录添加到由内存代理支持的缓冲存储中的？

您应该尝试将新数据直接推送到代理，然后重新加载商店，如下所示：

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();
    }
});

请参阅 this fiddle 尝试重现您的设置。

Extjs 缓冲存储加载所有新添加的项目

Extjs buffered store loads all new added items

grid

extjs

store

buffered

extjs4.1

商店

网格

数据控制者