Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / src / grid / feature / RowBody.js
diff --git a/src/grid/feature/RowBody.js b/src/grid/feature/RowBody.js
new file mode 100644 (file)
index 0000000..28183bc
--- /dev/null
@@ -0,0 +1,72 @@
+/**
+ * @class Ext.grid.feature.RowBody
+ * @extends Ext.grid.feature.Feature
+ *
+ * The rowbody feature enhances the grid's markup to have an additional
+ * tr -> td -> 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 [
+            '<tr class="' + this.rowBodyTrCls + ' {rowBodyCls}">',
+                '<td class="' + this.rowBodyTdCls + '" colspan="{rowBodyColspan}">',
+                    '<div class="' + this.rowBodyDivCls + '">{rowBody}</div>',
+                '</td>',
+            '</tr>'
+        ].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)]}');
+    },
+
+    /**
+     * 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: "",
+            rowBodyCls: this.rowBodyCls,
+            rowBodyColspan: colspan
+        };
+    }
+});
\ No newline at end of file