X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc:/examples/grid/GroupSummary.js..c930e9176a5a85509c5b0230e2bff5c22a591432:/examples/ux/GroupSummary.js

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