ExtJS 4 GridPanel - RowBody
For everyone who is looking for similar functionality with rowbody like in ExtJS 3 just read this short article.
In short - bad documentation created by Sencha. When you take a look at current version of ExtJS 4.2.2 you will find following code:
features: [{
ftype: 'rowbody',
setupRowData: function(record, rowIndex, rowValues) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
// Usually you would style the my-body-class in CSS file
return {
rowBody: '<div style="padding: 1em">'+record.get("desc")+'</div>',
rowBodyCls: "my-body-class",
rowBodyColspan: colspan
};
}
}]
After searching in source code of Ext.grid.feature.RowBody you will find followings:
...
/**
* @method getAdditionalData
* Provides additional data to the prepareData call within the grid view.
* The rowbody feature adds 3 additional variables into the grid view's template.
* These are rowBodyCls, rowBodyColspan, and rowBody.
* @param {Object} data The data for this particular record.
* @param {Number} idx The row index for this record.
* @param {Ext.data.Model} record The record instance
* @param {Object} orig The original result from the prepareData call to massage.
*/
setupRowData: function(record, rowIndex, rowValues) {
if (this.getAdditionalData) {
Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
}
},
...
which is what we are looking for. As you see, instead of using setupRowData, you will simply use getAdditionalData function and everything works well as expected.
Example:
me.features = [
{
ftype: 'rowbody',
getAdditionalData: function (data, rowIndex, record, rowValues) {
return {
rowBody: Ext.String.format('{0}', record.get("comments")),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: this.view.headerCt.getColumnCount()
};
}
}
]