ExtJs刷新无限滚动网格面板答案

【问题标题】：ExtJs refresh of infinite scrolling grid panelExtJs刷新无限滚动网格面板
【发布时间】：2013-06-21 06:40:01
【问题描述】：

我的应用程序 (ExtJs 4.2.1) 中有一个无限滚动网格面板，类似于 this example。用户可以单击刷新按钮，然后必须使用数据库中的数据更新网格的行。我在刷新按钮处理程序中调用 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' }
    }
});

有一个solution 用于无缓冲网格，这对我不起作用。

【问题讨论】：

试试这个guaranteeRange
guaranteeRange 已弃用，他们建议使用 getRange()。但两者都不会重新加载商店，它只是返回过时的记录。
您能否在给定的示例中将商店 URL 从 http 更改为 https？现在报错了。

标签： extjs datagrid extjs4 scroll extjs4.2

【解决方案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.
        }
    });

}

【讨论】：

我尝试了您的解决方案，向下滚动到记录 250，选择并按下刷新按钮。 selectionModel.select() 不起作用（不滚动或选择），因为存储在此索引处没有记录，只有前 100 条记录。我很确定正确的解决方案必须以某种方式包括加载正确的页面（或页面？）。
有分页工具栏吗？然后，您需要使用算法计算行位置（计算此页面中的页面和索引位置。）
是的，有一个分页工具栏。但它应该与网格的滚动位置无关。
也许，scrollBy 就是你要找的。 docs.sencha.com/extjs/4.1.0/#!/api/…
scrollBy 要求您提供 deltaX、deltaY，我没有这些值，也不知道如何可靠地计算它们。我希望使用Ext.selection.Model.select，并且只是证明一个索引或一个id，或类似的东西。

【解决方案2】：

在网格的 viewConfig 中定义以下内容：

视图配置：{ preserveScrollOnRefresh: 真 }

【讨论】：