docs/source/RowBody.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-grid-feature-RowBody'>/**
  19 </span> * @class Ext.grid.feature.RowBody
  20  * @extends Ext.grid.feature.Feature
  21  *
  22  * The rowbody feature enhances the grid's markup to have an additional
  23  * tr -&gt; td -&gt; div which spans the entire width of the original row.
  24  *
  25  * This is useful to to associate additional information with a particular
  26  * record in a grid.
  27  *
  28  * Rowbodies are initially hidden unless you override getAdditionalData.
  29  *
  30  * Will expose additional events on the gridview with the prefix of 'rowbody'.
  31  * For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
  32  *
  33  * @ftype rowbody
  34  */
  35 Ext.define('Ext.grid.feature.RowBody', {
  36     extend: 'Ext.grid.feature.Feature',
  37     alias: 'feature.rowbody',
  38     rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
  39     rowBodyTrCls: Ext.baseCSSPrefix + 'grid-rowbody-tr',
  40     rowBodyTdCls: Ext.baseCSSPrefix + 'grid-cell-rowbody',
  41     rowBodyDivCls: Ext.baseCSSPrefix + 'grid-rowbody',
  42
  43     eventPrefix: 'rowbody',
  44     eventSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
  45
  46     getRowBody: function(values) {
  47         return [
  48             '&lt;tr class=&quot;' + this.rowBodyTrCls + ' {rowBodyCls}&quot;&gt;',
  49                 '&lt;td class=&quot;' + this.rowBodyTdCls + '&quot; colspan=&quot;{rowBodyColspan}&quot;&gt;',
  50                     '&lt;div class=&quot;' + this.rowBodyDivCls + '&quot;&gt;{rowBody}&lt;/div&gt;',
  51                 '&lt;/td&gt;',
  52             '&lt;/tr&gt;'
  53         ].join('');
  54     },
  55
  56     // injects getRowBody into the metaRowTpl.
  57     getMetaRowTplFragments: function() {
  58         return {
  59             getRowBody: this.getRowBody,
  60             rowBodyTrCls: this.rowBodyTrCls,
  61             rowBodyTdCls: this.rowBodyTdCls,
  62             rowBodyDivCls: this.rowBodyDivCls
  63         };
  64     },
  65
  66     mutateMetaRowTpl: function(metaRowTpl) {
  67         metaRowTpl.push('{[this.getRowBody(values)]}');
  68     },
  69
  70 <span id='Ext-grid-feature-RowBody-method-getAdditionalData'>    /**
  71 </span>     * Provide additional data to the prepareData call within the grid view.
  72      * The rowbody feature adds 3 additional variables into the grid view's template.
  73      * These are rowBodyCls, rowBodyColspan, and rowBody.
  74      * @param {Object} data The data for this particular record.
  75      * @param {Number} idx The row index for this record.
  76      * @param {Ext.data.Model} record The record instance
  77      * @param {Object} orig The original result from the prepareData call to massage.
  78      */
  79     getAdditionalData: function(data, idx, record, orig) {
  80         var headerCt = this.view.headerCt,
  81             colspan  = headerCt.getColumnCount();
  82
  83         return {
  84             rowBody: &quot;&quot;,
  85             rowBodyCls: this.rowBodyCls,
  86             rowBodyColspan: colspan
  87         };
  88     }
  89 });</pre>
  90 </body>
  91 </html>