src/grid/feature/RowBody.js

   1 /**
   2  * @class Ext.grid.feature.RowBody
   3  * @extends Ext.grid.feature.Feature
   4  *
   5  * The rowbody feature enhances the grid's markup to have an additional
   6  * tr -> td -> div which spans the entire width of the original row.
   7  *
   8  * This is useful to to associate additional information with a particular
   9  * record in a grid.
  10  *
  11  * Rowbodies are initially hidden unless you override getAdditionalData.
  12  *
  13  * Will expose additional events on the gridview with the prefix of 'rowbody'.
  14  * For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
  15  *
  16  * @ftype rowbody
  17  */
  18 Ext.define('Ext.grid.feature.RowBody', {
  19     extend: 'Ext.grid.feature.Feature',
  20     alias: 'feature.rowbody',
  21     rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
  22     rowBodyTrCls: Ext.baseCSSPrefix + 'grid-rowbody-tr',
  23     rowBodyTdCls: Ext.baseCSSPrefix + 'grid-cell-rowbody',
  24     rowBodyDivCls: Ext.baseCSSPrefix + 'grid-rowbody',
  25
  26     eventPrefix: 'rowbody',
  27     eventSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
  28
  29     getRowBody: function(values) {
  30         return [
  31             '<tr class="' + this.rowBodyTrCls + ' {rowBodyCls}">',
  32                 '<td class="' + this.rowBodyTdCls + '" colspan="{rowBodyColspan}">',
  33                     '<div class="' + this.rowBodyDivCls + '">{rowBody}</div>',
  34                 '</td>',
  35             '</tr>'
  36         ].join('');
  37     },
  38
  39     // injects getRowBody into the metaRowTpl.
  40     getMetaRowTplFragments: function() {
  41         return {
  42             getRowBody: this.getRowBody,
  43             rowBodyTrCls: this.rowBodyTrCls,
  44             rowBodyTdCls: this.rowBodyTdCls,
  45             rowBodyDivCls: this.rowBodyDivCls
  46         };
  47     },
  48
  49     mutateMetaRowTpl: function(metaRowTpl) {
  50         metaRowTpl.push('{[this.getRowBody(values)]}');
  51     },
  52
  53     /**
  54      * Provide additional data to the prepareData call within the grid view.
  55      * The rowbody feature adds 3 additional variables into the grid view's template.
  56      * These are rowBodyCls, rowBodyColspan, and rowBody.
  57      * @param {Object} data The data for this particular record.
  58      * @param {Number} idx The row index for this record.
  59      * @param {Ext.data.Model} record The record instance
  60      * @param {Object} orig The original result from the prepareData call to massage.
  61      */
  62     getAdditionalData: function(data, idx, record, orig) {
  63         var headerCt = this.view.headerCt,
  64             colspan  = headerCt.getColumnCount();
  65
  66         return {
  67             rowBody: "",
  68             rowBodyCls: this.rowBodyCls,
  69             rowBodyColspan: colspan
  70         };
  71     }
  72 });