Процесс после загрузки сетки полностью с помощью ExtJS

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

мой контекст, После того, как данные были помещены в сетку, я проверю все строки и отмечу некоторые из них как отключенные на основе указанного условия и помещу подсказку в строку (объясните, почему она отключена). Я попытался использовать 2 события: "afterrender" Grid и "load" магазина grid, но они не сработали.

, потому что grid's 'afterrender' был уволен, когда первая сетка инициализация, не относится к загрузке данных. store's 'load' был запущен, когда данные были prefetch для хранения (не рендеринга на экране), поэтому я не могу получить строку <div> стиль его, как инвалида.

Итак, что такое событие для обнаружения, когда данные были загружены и полностью визуализированы в сетке? И как я могу выполнить это требование?

10
event-handling extjs extjs4 gridview

8 ответов

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

viewConfig: {
   getRowClass: function(r) {
      if (r.get('disabled'))
         return 'disabled-class';
      else 
         return '';
   }
}
2

ты пробовал viewready?

Ext.create('Ext.grid.Panel', {
    // ...
    viewConfig: {
        listeners: {
            viewready: function(view) {
                // ...
            }
        }
    }
});
8

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

внутри класса grid, вероятно, в initComponent функция, поставьте следующее,

this.relayEvents(this.getStore(), [ 'load' ]);
5

Если вы используете setTimeout функция это заставит вызов произойти после завершения рендеринга, он работал в аналогичном случае, я должен был ваш.

listeners: {
     'afterrender': function(grid) {
          setTimeout(function(){
          // ...
2

Я понимаю, что это старый вопрос, но недавно мне пришлось исправить проблему прокрутки в старом приложении ExtJS (4.0.2), и мне нужен триггер/событие, когда html (например, тег

) был фактически обновлен/вставлен в представление сетки.

следующий скрипт добавляет новое событие "update" в Ext.сетка.Вид. Событие update запускается после вставки html в представление. 

(function(){
    var _setNewTemplate = Ext.grid.View.prototype.setNewTemplate; 
    Ext.override(Ext.grid.View, {
        setNewTemplate: function(){

            _setNewTemplate.apply(this, arguments);

            var view = this;
            var template = this.tpl;
            template.overwrite = function(el, values, returnElement){ 
                el = Ext.getDom(el);
                el.innerHTML = template.applyTemplate(values);
                view.fireEvent("update", view, el); //<--New Event!
                return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
            };

            template.doInsert = function(where, el, values, returnEl) {
                el = Ext.getDom(el);
                var newNode = Ext.core.DomHelper.insertHtml(where, el, template.applyTemplate(values));
                view.fireEvent("update", view, el); //<--New Event!
                return returnEl ? Ext.get(newNode, true) : newNode;
            }

        }
    });
})();

использовать новое событие, вы просто добавляете новый обработчик событий к сетке. Пример:

paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...

    //do something...
    console.log(el);

}, this);

обратите внимание, что это было реализовано с помощью ExtJS 4.0.2. Возможно, Вам потребуется обновить скрипт для вашей версии ExtJS.

обновление

я обнаружил, что новое событие "update" не запускалось, когда представление отображало пустой магазин. В качестве обходного пути я расширил метод обновления представления.

(function(){
    var _refresh = Ext.grid.View.prototype.refresh;
    Ext.override(Ext.grid.View, {
        refresh: function() {
            _refresh.apply(this, arguments);                

            var view = this;
            var el = view.getTargetEl();
            var records = view.store.getRange();

            if (records.length < 1) {                    
                view.fireEvent("update", view, el); //<--New Event!
            }
        }
    });
})();
1

используйте свойство success: в getForm ().load () для вызова функции для обработки post load processing

0

viewready работал на меня !!!

настроено, как показано ниже в контроллере:

Ext.define('App.controller.Dashboard', {
  extend: 'Ext.app.Controller',
  init: function() {
    this.control({
        '#summary-bottom-grid': {
            viewready: function(cmp){
                var link = Ext.DomQuery.selectNode('span.summary-status',cmp.body.dom);
            }
          }
     });    
  }
}
0

Я использую extjs 4.2.3, и это сработало.

я использовал этот:

this.grid = Ext.create('Ext.grid.Panel',{
     store: this.ds,
     margins: '0 0 0 10', // top right button left
     title: lng.menu.caption.mailHeaderGrid,
     selType: 'checkboxmodel',
     columns:[...],
     selModel: {
         renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
             var baseCSSPrefix = Ext.baseCSSPrefix;
             metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
             return (record.get('status') =='lng.label.surveyFinalized') ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
         },
     },

для меня работает на chrome!

https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

0