Question

我的应用程序（ExtJs 4.2.1）中有一个无限滚动网格面板，类似于this example。用户可以单击刷新按钮，然后必须使用来自DB的数据更新网格的行。我在刷新按钮处理程序中调用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，这对我不起作用。

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

}

Answer 2

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

viewConfig：{ preserveScrollOnRefresh：true }

ExtJs刷新无限滚动网格面板

2 个答案: