X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/grid/feature/RowBody.js diff --git a/src/grid/feature/RowBody.js b/src/grid/feature/RowBody.js new file mode 100644 index 00000000..28183bc3 --- /dev/null +++ b/src/grid/feature/RowBody.js @@ -0,0 +1,72 @@ +/** + * @class Ext.grid.feature.RowBody + * @extends Ext.grid.feature.Feature + * + * The rowbody feature enhances the grid's markup to have an additional + * tr -> td -> div which spans the entire width of the original row. + * + * This is useful to to associate additional information with a particular + * record in a grid. + * + * Rowbodies are initially hidden unless you override getAdditionalData. + * + * Will expose additional events on the gridview with the prefix of 'rowbody'. + * For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'. + * + * @ftype rowbody + */ +Ext.define('Ext.grid.feature.RowBody', { + extend: 'Ext.grid.feature.Feature', + alias: 'feature.rowbody', + rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden', + rowBodyTrCls: Ext.baseCSSPrefix + 'grid-rowbody-tr', + rowBodyTdCls: Ext.baseCSSPrefix + 'grid-cell-rowbody', + rowBodyDivCls: Ext.baseCSSPrefix + 'grid-rowbody', + + eventPrefix: 'rowbody', + eventSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody-tr', + + getRowBody: function(values) { + return [ + '', + '', + '
{rowBody}
', + '', + '' + ].join(''); + }, + + // injects getRowBody into the metaRowTpl. + getMetaRowTplFragments: function() { + return { + getRowBody: this.getRowBody, + rowBodyTrCls: this.rowBodyTrCls, + rowBodyTdCls: this.rowBodyTdCls, + rowBodyDivCls: this.rowBodyDivCls + }; + }, + + mutateMetaRowTpl: function(metaRowTpl) { + metaRowTpl.push('{[this.getRowBody(values)]}'); + }, + + /** + * Provide 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. + */ + getAdditionalData: function(data, idx, record, orig) { + var headerCt = this.view.headerCt, + colspan = headerCt.getColumnCount(); + + return { + rowBody: "", + rowBodyCls: this.rowBodyCls, + rowBodyColspan: colspan + }; + } +}); \ No newline at end of file