Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / ux / GroupSummary.js
similarity index 61%
rename from examples/grid/GroupSummary.js
rename to examples/ux/GroupSummary.js
index bfc9413..18073fc 100644 (file)
@@ -1,16 +1,35 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.ns('Ext.ux.grid');\r
 \r
-Ext.grid.GroupSummary = function(config){\r
-    Ext.apply(this, config);\r
-};\r
+/**\r
+ * @class Ext.ux.grid.GroupSummary\r
+ * @extends Ext.util.Observable\r
+ * A GridPanel plugin that enables dynamic column calculations and a dynamically\r
+ * updated grouped summary row.\r
+ */\r
+Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {\r
+    /**\r
+     * @cfg {Function} summaryRenderer Renderer example:<pre><code>\r
+summaryRenderer: function(v, params, data){\r
+    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');\r
+},\r
+     * </code></pre>\r
+     */\r
+    /**\r
+     * @cfg {String} summaryType (Optional) The type of\r
+     * calculation to be used for the column.  For options available see\r
+     * {@link #Calculations}.\r
+     */\r
 \r
-Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {\r
+    constructor : function(config){\r
+        Ext.apply(this, config);\r
+        Ext.ux.grid.GroupSummary.superclass.constructor.call(this);\r
+    },\r
     init : function(grid){\r
         this.grid = grid;\r
         this.cm = grid.getColumnModel();\r
@@ -47,6 +66,10 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
         this.cellTpl.compile();\r
     },\r
 \r
+    /**\r
+     * Toggle the display of the summary row on/off\r
+     * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.\r
+     */\r
     toggleSummaries : function(visible){\r
         var el = this.grid.getGridEl();\r
         if(el){\r
@@ -83,6 +106,11 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
         });\r
     },\r
 \r
+    /**\r
+     * @private\r
+     * @param {Object} rs\r
+     * @param {Object} cs\r
+     */\r
     calculate : function(rs, cs){\r
         var data = {}, r, c, cfg = this.cm.config, cf;\r
         for(var j = 0, jlen = rs.length; j < jlen; j++){\r
@@ -91,7 +119,7 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
                 c = cs[i];\r
                 cf = cfg[i];\r
                 if(cf.summaryType){\r
-                    data[c.name] = Ext.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);\r
+                    data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);\r
                 }\r
             }\r
         }\r
@@ -136,7 +164,7 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
         }\r
     },\r
 \r
-    // Note: requires that all (or the first) record in the \r
+    // Note: requires that all (or the first) record in the\r
     // group share the same group value. Returns false if the group\r
     // could not be found.\r
     refreshSummary : function(groupValue){\r
@@ -184,6 +212,17 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
         }\r
     },\r
 \r
+    /**\r
+     * Show a message in the summary row.\r
+     * <pre><code>\r
+grid.on('afteredit', function(){\r
+    var groupValue = 'Ext Forms: Field Anchoring';\r
+    summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
+});\r
+     * </code></pre>\r
+     * @param {String} groupValue\r
+     * @param {String} msg Text to use as innerHTML for the summary row.\r
+     */\r
     showSummaryMsg : function(groupValue, msg){\r
         var gid = this.view.getGroupId(groupValue);\r
         var node = this.getSummaryNode(gid);\r
@@ -193,7 +232,29 @@ Ext.extend(Ext.grid.GroupSummary, Ext.util.Observable, {
     }\r
 });\r
 \r
-Ext.grid.GroupSummary.Calculations = {\r
+//backwards compat\r
+Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;\r
+\r
+\r
+/**\r
+ * Calculation types for summary row:</p><div class="mdetail-params"><ul>\r
+ * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>\r
+ * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>\r
+ * </ul></div>\r
+ * <p>Custom calculations may be implemented.  An example of\r
+ * custom <code>summaryType=totalCost</code>:</p><pre><code>\r
+// define a custom summary function\r
+Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){\r
+    return v + (record.data.estimate * record.data.rate);\r
+};\r
+ * </code></pre>\r
+ * @property Calculations\r
+ */\r
+\r
+Ext.ux.grid.GroupSummary.Calculations = {\r
     'sum' : function(v, record, field){\r
         return v + (record.data[field]||0);\r
     },\r
@@ -219,16 +280,66 @@ Ext.grid.GroupSummary.Calculations = {
         var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));\r
         return t === 0 ? 0 : t / c;\r
     }\r
-}\r
+};\r
+Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;\r
+\r
+/**\r
+ * @class Ext.ux.grid.HybridSummary\r
+ * @extends Ext.ux.grid.GroupSummary\r
+ * Adds capability to specify the summary data for the group via json as illustrated here:\r
+ * <pre><code>\r
+{\r
+    data: [\r
+        {\r
+            projectId: 100,     project: 'House',\r
+            taskId:    112, description: 'Paint',\r
+            estimate:    6,        rate:     150,\r
+            due:'06/24/2007'\r
+        },\r
+        ...\r
+    ],\r
 \r
-Ext.grid.HybridSummary = Ext.extend(Ext.grid.GroupSummary, {\r
+    summaryData: {\r
+        'House': {\r
+            description: 14, estimate: 9,\r
+                   rate: 99, due: new Date(2009, 6, 29),\r
+                   cost: 999\r
+        }\r
+    }\r
+}\r
+ * </code></pre>\r
+ *\r
+ */\r
+Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {\r
+    /**\r
+     * @private\r
+     * @param {Object} rs\r
+     * @param {Object} cs\r
+     */\r
     calculate : function(rs, cs){\r
         var gcol = this.view.getGroupField();\r
         var gvalue = rs[0].data[gcol];\r
         var gdata = this.getSummaryData(gvalue);\r
-        return gdata || Ext.grid.HybridSummary.superclass.calculate.call(this, rs, cs);\r
+        return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);\r
     },\r
 \r
+    /**\r
+     * <pre><code>\r
+grid.on('afteredit', function(){\r
+    var groupValue = 'Ext Forms: Field Anchoring';\r
+    summary.showSummaryMsg(groupValue, 'Updating Summary...');\r
+    setTimeout(function(){ // simulate server call\r
+        // HybridSummary class implements updateSummaryData\r
+        summary.updateSummaryData(groupValue,\r
+            // create data object based on configured dataIndex\r
+            {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});\r
+    }, 2000);\r
+});\r
+     * </code></pre>\r
+     * @param {String} groupValue\r
+     * @param {Object} data data object\r
+     * @param {Boolean} skipRefresh (Optional) Defaults to false\r
+     */\r
     updateSummaryData : function(groupValue, data, skipRefresh){\r
         var json = this.grid.store.reader.jsonData;\r
         if(!json.summaryData){\r
@@ -240,6 +351,11 @@ Ext.grid.HybridSummary = Ext.extend(Ext.grid.GroupSummary, {
         }\r
     },\r
 \r
+    /**\r
+     * Returns the summaryData for the specified groupValue or null.\r
+     * @param {String} groupValue\r
+     * @return {Object} summaryData\r
+     */\r
     getSummaryData : function(groupValue){\r
         var json = this.grid.store.reader.jsonData;\r
         if(json && json.summaryData){\r
@@ -247,4 +363,7 @@ Ext.grid.HybridSummary = Ext.extend(Ext.grid.GroupSummary, {
         }\r
         return null;\r
     }\r
-});
\ No newline at end of file
+});\r
+\r
+//backwards compat\r
+Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;\r