ExtJS RowExpander plugin overriding default getRowClass
ExtJS (3) is great for OO style interface design but has a couple of strange behaviors. For instance when adding the ExtJS RowExpander plugin to a grid, the plugin overrides the gridView’s getRowClass function. That’s not really what you want. For instance, I want to mark certain records in a grid red when they are overdue, and also use the RowExpander plugin. The plugin however throws away my own custom formatting.
Solution is to create a backup copy of the default getRowClass function and call both the plugin function and the original, concatenating the results together with a space
getRowClass: function(record, rowIndex, p, ds) {
p.cols = p.cols - 1;
var content = this.bodyContent[record.id];
if (!content && !this.lazyRender) {
content = this.getBodyContent(record, rowIndex);
}
if (content) {
p.body = content;
}
return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
},
/* If grid already has a getRowClass, don't override it
* get the original class and combine it with our class
*/
// @private
combineGetRowClass: function(record, rowIndex, p, ds) {
var cls = this.originalGetRowClass(record, rowIndex, p, ds) + '"" + this.getRowClass(record, rowIndex, p, ds);
return cls;
},
init: function(grid) {
this.grid = grid;
var view = grid.getView();
/* create a backup copy of the original, we want to apply both the standard and our custom functions */
if (view.getRowClass) {
this.originalGetRowClass = this.clone(view.getRowClass);
view.getRowClass = this.combineGetRowClass.createDelegate(this);
} else {
view.getRowClass = this.getRowClass.createDelegate(this);
}
view.enableRowBody = true;
grid.on('render', this.onRender, this);
grid.on('destroy', this.onDestroy, this);
},
// @private
clone: function(obj) {
if (obj == null || typeof(obj) != 'object') return obj;
var temp = new obj.constructor();
for (var key in obj)
temp[key] = clone(obj[key]);
return temp;
}
5 Responses to ExtJS RowExpander plugin overriding default getRowClass
Leave a Reply Cancel reply
POST CATEGORIES
ExtJS
- Sencha.com Sencha.com – creators of ExtJS and Sencha Touch






hi ,thanks for this article,thats exactly the problem im facing..but i dont know wher to use ur code,tried t use it on Ext.override(Ext.grid.RowExpander,{..
but it seems not the correct way.please reply to me as soon as possible,thank you
Hi, I just changed the plugin itself but the override should work as well. Will test it out next week
Hi Rob, thanks for the nice post. However, I have tried to change RowExpander.js as you have shown here, but it failed to apply my custom getRowClass defined in my grid.I have defined my own custom getRowClass in my GridPanel as follows:
viewConfig: {
getRowClass: function (record, index) {
var state = record.data.state;
var vstate = record.data.vstate;
if (state == ‘Down’ && vstate == ‘Running’) {
return ‘alert-asset’;
}
}
}
I added some print at your function
combineGetRowClass: function(record, rowIndex, p, ds) {
var cls = this.originalGetRowClass(record, rowIndex, p, ds) + ‘ ‘ + this.getRowClass(record, rowIndex, p, ds);
return cls;
},
found that cls just returns x-grid3-row-collapsed twice. Do you know what is going wrong here?
-min
Never mind, I figured out the problem, it is a simple copy and paste error.
Glad I could help
good luck