Обновление ExtJs панели сетки с бесконечной прокруткой

В моем приложении (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' }
    }
});

Существует решение для небуферизованных сеток, которое мне не подходит.


scroll datagrid extjs extjs4 extjs4.2
person Christoph    schedule 21.06.2013    source источник
comment
попробуйте этот GuaranRange   -  person MMT    schedule 21.06.2013
comment
гарантияRange устарела, они советуют использовать getRange (). Но оба не перезагружают магазин, а просто возвращают устаревшие записи.   -  person Christoph    schedule 21.06.2013
comment
Не могли бы вы изменить URL-адрес магазина с http на https в данном примере? Сейчас выдает ошибку.   -  person Moksh    schedule 30.08.2020

Ответы (2)


arrow_upward
4
arrow_downward

Функция контроллера нагрузки:

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

}
person mfruizs2    schedule 21.06.2013
comment
Я попробовал ваше решение, прокрутил вниз до записи 250, выбрал и нажал кнопку обновления. SelectionModel.select () не работает (не прокручивается и не выбирается), поскольку в хранилище нет записи по этому индексу, только первые 100 записей. Я почти уверен, что правильное решение должно каким-то образом включать загрузку правильной страницы (или страниц?). - person Christoph; 21.06.2013
comment
Есть ли панель инструментов для подкачки страниц? затем вам нужно вычислить позицию строки с помощью алгоритма (вычислить позицию страницы и позицию индекса на этой странице). - person mfruizs2; 21.06.2013
comment
да, есть панель инструментов перелистывания. Но это не должно иметь ничего общего с положением прокрутки сетки. - person Christoph; 21.06.2013
comment
Может быть, scrollBy это то, что вы ищете. docs.sencha.com/extjs/4.1 .0 / #! / Api / - person mfruizs2; 21.06.2013
comment
scrollBy требует, чтобы вы указали deltaX, deltaY, у меня нет этих значений и я не вижу, как их надежно вычислить. Я надеюсь использовать Ext.selection.Model.select и просто докажу индекс, идентификатор или что-то подобное. - person Christoph; 21.06.2013
comment
это (grid.getSelectionModel (). select (storeGrid.getRange (). length-1);) работает для вас? ... То есть мы заменяем storeGrid.getRange (). Length-1 и находим новую строку позиции в магазине, store.find (...) docs.sencha.com/extjs/ 4.1.0 / #! / Api / Ext.data.Store-method-find - person mfruizs2; 21.06.2013
comment
Думаю, ваш ответ правильный. Это работает, пока пользователь не прокручивает страницу вниз. Я просто не мог найти, как надежно загрузить правильные данные, когда пользователь прокручивает страницу 1+. - person Christoph; 21.06.2013
comment
Не более 100 строк на страницу - ›NumTotalRows / numPerPag = Количество страниц. index% (Количество страниц) = your_row_pag ... теперь, получите позицию строки на этой странице. - person mfruizs2; 21.06.2013
comment
Я только что нашел loadPage docs.sencha .com / extjs / 4.2.1 / #! / api / У меня работает, если я использую storeGrid.loadPage (1+ (index / totalCount), options). Обновите свой ответ, и я могу его принять. - person Christoph; 21.06.2013

arrow_upward
0
arrow_downward

Определите следующее в viewConfig вашей сетки:

viewConfig: {preserveScrollOnRefresh: true}

person slashwhatever    schedule 23.10.2014