docs/source/RowBody.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.feature.RowBody'>/**
   2 </span> * @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 -&gt; td -&gt; 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             '&lt;tr class=&quot;' + this.rowBodyTrCls + ' {rowBodyCls}&quot;&gt;',
  32                 '&lt;td class=&quot;' + this.rowBodyTdCls + '&quot; colspan=&quot;{rowBodyColspan}&quot;&gt;',
  33                     '&lt;div class=&quot;' + this.rowBodyDivCls + '&quot;&gt;{rowBody}&lt;/div&gt;',
  34                 '&lt;/td&gt;',
  35             '&lt;/tr&gt;'
  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 <span id='Ext-grid.feature.RowBody-method-getAdditionalData'>    /**
  54 </span>     * 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: &quot;&quot;,
  68             rowBodyCls: this.rowBodyCls,
  69             rowBodyColspan: colspan
  70         };
  71     }
  72 });</pre></pre></body></html>