Я использую ExtJS для загрузки данных в сетку, и я хочу добавить некоторые дополнительные процессы после того, как данные были полностью помещены в сетку.
Мой контекст: после того, как данные были помещены в сетку, я проверю все строки и пометьте некоторые из них как отключенные на основе указанного условия и поместите подсказку в строку (объясните, почему она отключена). Я попытался использовать 2 события: "afterrender" из Grid и "загрузить" хранилища сетки, но они не сработали.
Потому что grid 'afterrender' был запущен при первой инициализации сетки, не относящейся к загрузке данных. store 'load' был запущен, когда данные были prefetch для хранения (а не рендеринга на экране), поэтому я не могу заставить строку <div> стирать ее как отключенную.
Итак, каково событие для обнаружения, когда данные были загружены и отображены полностью на сетке? И как я могу реализовать это требование?
Я думаю, что для вас не нужно ждать загрузки сетки, но используйте параметр viewConfig для панели сетки, чтобы настроить способ отображения строк:
viewConfig: {
getRowClass: function(r) {
if (r.get('disabled'))
return 'disabled-class';
else
return '';
}
}
Вы пробовали viewready?
Ext.create('Ext.grid.Panel', {
// ...
viewConfig: {
listeners: {
viewready: function(view) {
// ...
}
}
}
});
Вы можете напрямую нажать на событие store load или передать событие через сетку.
Внутри класса сетки, возможно, в функции initComponent, поставьте следующее,
this.relayEvents(this.getStore(), [ 'load' ]);
Если вы используете функцию setTimeout, это заставит вызов произойти после завершения рендеринга, он работал в аналогичном случае, который я имел к вашему.
listeners: {
'afterrender': function(grid) {
setTimeout(function(){
// ...
Я понимаю, что это старый вопрос, но мне недавно пришлось исправить проблему прокрутки в старом приложении ExtJS (4.0.2), и мне нужен триггер/событие, когда html (например, тег <table> ) был фактически обновлен/вставлен в сетку.
Следующий script добавляет новое событие обновления для Ext.grid.View. Событие обновления запускается после того, как 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. Возможно, вам понадобится обновить script для вашей версии 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!
}
}
});
})();
Используйте свойство success: свойство getForm(). load() для вызова функции обработки обработки после загрузки
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);
}
}
});
}
}
Я использую 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>';
},
},
Для меня работает на хром!