I realize this is an old question but I recently had to fix a scrolling issue in an old ExtJS (4.0.2) app and I needed a trigger/event for when html (e.g. <table> tag) was actually updated/inserted in the grid view.
The following script adds new "update" event to Ext.grid.View. The update event is fired after html has been inserted into the view.
(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;
}
}
});
})();
To use the new event, you simply add a new event listener to the grid view. Example:
paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...
//do something...
console.log(el);
}, this);
Note that this was implemented using ExtJS 4.0.2. You may need to update the script for your version of ExtJS.
UPDATE
I found that the new "update" event was not firing when a view was rendering an empty store. As a workaround, I extended the view's refresh method.
(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!
}
}
});
})();
