Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / 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>