Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / RowBody.html
diff --git a/docs/source/RowBody.html b/docs/source/RowBody.html
new file mode 100644 (file)
index 0000000..43286c9
--- /dev/null
@@ -0,0 +1,72 @@
+<!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'>/**
+</span> * @class Ext.grid.feature.RowBody
+ * @extends Ext.grid.feature.Feature
+ *
+ * The rowbody feature enhances the grid's markup to have an additional
+ * tr -&gt; td -&gt; 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 [
+            '&lt;tr class=&quot;' + this.rowBodyTrCls + ' {rowBodyCls}&quot;&gt;',
+                '&lt;td class=&quot;' + this.rowBodyTdCls + '&quot; colspan=&quot;{rowBodyColspan}&quot;&gt;',
+                    '&lt;div class=&quot;' + this.rowBodyDivCls + '&quot;&gt;{rowBody}&lt;/div&gt;',
+                '&lt;/td&gt;',
+            '&lt;/tr&gt;'
+        ].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)]}');
+    },
+
+<span id='Ext-grid.feature.RowBody-method-getAdditionalData'>    /**
+</span>     * 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: &quot;&quot;,
+            rowBodyCls: this.rowBodyCls,
+            rowBodyColspan: colspan
+        };
+    }
+});</pre></pre></body></html>
\ No newline at end of file