2010-02-10 2 views
7

В ExtJS, как я могу загрузить хранилище при отображении сетки? Я хочу, чтобы хранилище загружалось только тогда, когда отображается сетка (пользователь нажимает на кнопку, чтобы показать сетку, так что расточительно загружать магазин заранее). Я попробовал прослушиватель afterrender, но он отображает маску загрузки в неправильном месте, а слушатель afterlayout перезагружает сетку каждый раз, когда сетка изменяется.В ExtJS, как я могу загрузить хранилище при отображении сетки?

ответ

13

Это одна из тех вещей, которые могут быть немного больными, потому что они слишком много делали браузеру (особенно заметно в IE).

Мне нравится использовать комбинацию отсрочки, чтобы браузер восстановился достаточно долго, чтобы правильно отображать вещи.

var grid = new Ext.grid.GridPanel({ 
    ..., 
    listeners : { 
     render : function(grid){  
      grid.body.mask('Loading...'); 
      var store = grid.getStore(); 
      store.load.defer(100, store); 
     }, 
     delay: 200 
    } 
}); 

Игра со значением задержки/отсрочки должна дать вам желаемые результаты. Продолжительность времени, в течение которого вам нужно будет отложить/отложить, зависит от того, насколько сложна ваша сетка и насколько быстро работает браузер.

Также не забудьте удалить маску, когда загрузка вашего магазина завершена.

listeners: { 
    load: function(){ 
     yourGrid.body.unmask(); 
    } 
} 

ПРИМЕЧАНИЕ: Всего несколько уточнений к ответу Ллойда - вам не нужно, чтобы установить автозагрузку ложь, потому что по умолчанию (то есть: не устанавливать его на всех), и это звучит как из ваше описание, которое вы хотели бы использовать метод загрузки магазинов, вместо перезагрузки.

+0

Это хороший подход, хотя я бы применил только маскировку, если вы обнаружите, что вам это действительно нужно. Если он загружается слишком быстро, тогда маска может выглядеть как мерцание. Кроме того, убедитесь, что вы открываете маску в обработчике событий загрузки хранилища. Пример комбинации браузера макета «Вкладки с вложенными макетами» использует это при методе рендеринга загрузки магазина во внутренней сетке: http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html –

+0

Я согласен с комментариями Брайана - забудьте об этом, если ваши данные вернутся менее чем за 5 секунд. Пользователь никогда этого не заметит. Добавил лакомый кусочек об удалении маски, спасибо. –

+0

Ницца .. Просто интересно, что такое «задержка: 200»? Это необходимо? – Gugan

0

Вы можете установить autoLoad в false для магазина и просто вызвать store.reload(); когда пользователь нажимает кнопку, чтобы показать сетку.

+2

Это работает, но тогда это означает, что сетка не несет ответственности за собственный магазин. Это нормально, если вы делитесь хранилищем через несколько компонентов, но для одной сетки я предпочитаю, чтобы сетка отвечала за загрузку магазина. –

2

Вы рассматривали обращение activate событие? Вы можете добавить обработчик событий, который загружает данные на событие activate, а затем удаляет себя.

this.on('activate', function(){ 
this.un('activate', arguments.callee); 
    this.store.load(); 
}, this); 

Здесь this относится к GridPanel.

Смежные вопросы