EXT JS。如何在Buffered Scrolling示例中加载所有行？

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将有不同的源来检索每条记录。