ExtJs无限滚动网格面板的刷新

Question

我在我的应用程序中有一个无限滚动的网格面板（ExtJs 4.2.1），类似于这个示例。用户可以点击刷新按钮，然后网格行必须使用来自数据库的数据进行更新。我在刷新按钮处理程序中调用store.load()，并且我的数据得到了更新。对于网格面板的第一行记录（来自第1页）效果很好。但是如果用户向下滚动网格，则不起作用。在store.load之后，网格会将滚动位置重置到顶部。

我请求解决方案以重新加载存储并刷新保持当前选择和当前滚动位置的网格。好消息是：我有存储库中每个记录的全局索引。

以下是我的代码，数据库中有数千条记录。 网格面板：

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Panel',
    requires:[ 'Ext.grid.plugin.BufferedRenderer'],
    alias: 'widget.myGrid',
    plugins: 'bufferedrenderer',
    loadMask: true,
    selModel: {
        mode: 'MULTI',
        pruneRemoved: false
    },
    itemSelector: 'div.workspaceItemSelector',
    overItemCls: 'workspaceItemMouseOver',
    trackOver: true,
    autoScroll: true,
    verticalScroller: { variableRowHeight: true },
    defaultSortOrder: 'ASC',

    // and some column definitions ...
});

存储：

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    buffered: true,
    pageSize: 100,
    leadingBufferZone: 100,
    remoteSort: true,
    model: 'MyApp.model.MyModel',
    storeId: 'myStore',
    proxy:  {
        type: 'rest',
        url: 'someUrl',
        reader: { type: 'json', totalProperty: 'total', root: 'items' }
    }
});

对于非缓冲网格，有一种解决方案，但对我无效。

- Christoph

---

尝试使用 guaranteeRange。 - MMT

guaranteeRange已经被弃用，建议使用getRange()。但是两者都不会重新加载存储，它们只会返回过时的记录。 - Christoph

请问您能否在给定的示例中将商店URL从http更改为https？现在它出现了错误。 - Moksh

Answer 1

在加载控制器功能：

loadStoreFunction : function (grid) {

    var storeGrid = grid.getStore();
    var currentElement = grid.getSelectionModel().getSelection();
    storeGrid.load({
        scope: this,
        callback: function(records, operation, success) {
            grid.getView().focus();
            grid.getSelectionModel().select("index of currentElement"); // last position.
            grid.getSelectionModel().select(storeGrid.getRange().length-1); // last insert
                    storeGrid.loadPage(1+(index/totalCount),options); // Load row's page calculated.
        }
    });

}

- mfruizs

---

我尝试了你的解决方案，滚动到记录250，选择并按下刷新按钮。由于存储器在此索引处没有记录，仅有前100条记录，因此selectionModel.select()无法工作（无法滚动或选择）。我相当确定正确的解决方案必须包括加载正确的页面（或页面？）。 - Christoph

它有PagingToolbar吗？那么，您需要使用算法计算行位置（计算页码和该页中的索引位置）。 - mfruizs

是的，有一个分页工具栏。但它不应该与网格的滚动位置有任何关系。 - Christoph

scrollBy函数需要你提供deltaX和deltaY两个参数，但我目前没有这些数值，也不知道如何可靠地计算它们。我希望可以使用Ext.selection.Model.select函数，并仅提供索引或ID等类似的内容。 - Christoph

每页最多100行 --> NumTotalRows/numPerPag = 总页数。 index% (总页数) = 当前页码 ... 现在，获取此页中的行位置。 - mfruizs

Answer 2

在您的网格视图配置中定义以下内容：

viewConfig: { preserveScrollOnRefresh: true }

- slashwhatever