ExtJS: перезагрузить хранилище данных без перерисовки сетки

Question

(ExtJS 3.3.1)

Как сохранить положение прокрутки сетки после вызова метода grid.store.reload ()?

Answer 1

Наконец я нашел этот раздел в faq сетки extjs.Этот отрывок напрямую не работает в webkit-браузерах.Вы должны добавить тайм-аут и вызвать часть восстановления немного позже.100мс помогли мне здесь.Вот что у меня сейчас:

grid.getView().on('beforerefresh', function(view) {
  view.scrollTop = view.scroller.dom.scrollTop;
  view.scrollHeight = view.scroller.dom.scrollHeight;
});

grid.getView().on('refresh', function(view) {
    setTimeout(function () {
        view.scroller.dom.scrollTop = view.scrollTop + (view.scrollTop == 0 ? 0 : view.scroller.dom.scrollHeight - view.scrollHeight);
    }, 100);
});

Работает в IE8, Chrome9, Firefox3.6

Не в Opera 11

У этого решения есть один недостаток: без активацииГоворя представлению не восстанавливать позицию прокрутки, оно также восстанавливается, если вы переходите на следующую страницу с помощью paginator.

Я думаю, что sencha должен интегрировать эту функцию как опцию, потому что это глубокая интеграция, чтобы сказать представлениюсетка для восстановления позиции, если магазин перезагружает ту же позицию источника данных, и не делать этого, если были внесены изменения в базовые параметры ... или около того.

Answer 2

Мне удалось это исправить так:

this.store = new Ext.data.Store({
    listeners:{
        'load':function (store, records, options) {
            var restoreScroll = function(scrollState){
                grid.getView().restoreScroll(scrollState);
            };
            if (grid.view && grid.view.scroller){
                _.delay(restoreScroll, 10,grid.getView().getScrollState());
            }
        }
    }, ...
}

Как видите, я использую _.delay (из фреймворка underscore.js). Это как setTimeout.

Более оптимизированная версия, не использующая функцию restoreScroll, не сработала. Я думаю, что вид меняется при вызове restoreScroll. Я должен был занять 10 миллисекунд. 1 было недостаточно. Как утверждают другие, ext.js использует много отложенных вызовов.

Answer 3

Это два разных вопроса.

Сначала, чтобы перезагрузить магазин без перерисовки сетки, используйте store.suspendEvents(), затем вызовите store.resumeEvents() в обратном вызове загрузки.

Восстановление позиции прокрутки послеобновить немного сложнее, особенно из-за того, что ExtJS чрезмерно использует setTimeout s и defer s в Firefox.Попробуйте сохранить состояние прокрутки с помощью var state = view.getScrollState(), а затем восстановите его с помощью view.restoreScroll.defer(1, state)

Answer 4

Этот пост недавно помог мне найти, что представление сохраняет контроль над scrollState.Я смог view.saveScrollState () затем отложить view.restoreScrollState () с timeOut .Чем больше тайм-аут, тем больше неприятностей при возврате, поэтому имейте в виду, что вы хотите, чтобы минимальное количество тайм-аутов для представления обновлялось / отображалось.Чего не хватало в более ранних публикациях, так это того, что представление имеет «saveScrollState», где оно хранит внутреннюю позицию прокрутки.

view.saveScrollState();
//do some things here
setTimeout(function(){
   view.restoreScrollState();
},1);

Answer 5

listeners: {
                beforerefresh: function(v) {
                    v.hide();
                },
                refresh: function(v) {
                    v.show();
                }
            }

у меня сработало (добавить в конфиг вида)