extjs - EXT JS。如何在“缓冲滚动”示例中加载所有行？

Question

在此示例中:
http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/buffer-grid.html

我想添加一个标题为“全部读取”的按钮，单击该按钮时，应该加载所有行，因此不再需要缓冲。

当用户希望对所有内容有更多控制而不必在特殊情况下等待缓冲区完成时，此功能很有用。

谢谢，任何帮助表示赞赏

Answer 1

使用具有共同模型的两个存储。

第一个是当前的(带有缓冲，分页等)。第二个是普通存储，没有缓冲，分页等。单击“全部读取”时，只需将每条记录加载到第二个存储中，并用新数据更新第一个。

这是一个例子:

Ext.create ('Ext.grid.Panel', {
    renderTo: Ext.getBody () ,
    width: 300 ,
    height: 300 ,
    store: bufferingStore ,

    columns: [ ... ] ,

    tbar: {
        items: [{
            xtype: 'button' ,
            text: 'Read all' ,
            handler: function (btn) {
                // Here's the call to retrieve all records
                // Also you can do it with 'autoLoad: true' param
                normalStore.load ();

                // Then, flush the bufferingStore, currently use by the grid
                bufferingStore.removeAll ();

                // Populate bufferingStore with normalStore
                normalStore.each (function (record) {
                    bufferingStore.add (record);
                });
            }
        }]
    }
});

normalStore和bufferingStore具有相同的模型，但是normalStore将具有不同的源来检索每个记录。