Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / GroupingSummary.html
diff --git a/docs/source/GroupingSummary.html b/docs/source/GroupingSummary.html
new file mode 100644 (file)
index 0000000..efa6afc
--- /dev/null
@@ -0,0 +1,219 @@
+<!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.GroupingSummary'>/**
+</span> * @class Ext.grid.feature.GroupingSummary
+ * @extends Ext.grid.feature.Grouping
+ * 
+ * This feature adds an aggregate summary row at the bottom of each group that is provided
+ * by the {@link Ext.grid.feature.Grouping} feature. There are 2 aspects to the summary:
+ * 
+ * ## Calculation
+ * 
+ * The summary value needs to be calculated for each column in the grid. This is controlled
+ * by the summaryType option specified on the column. There are several built in summary types,
+ * which can be specified as a string on the column configuration. These call underlying methods
+ * on the store:
+ *
+ *  - {@link Ext.data.Store#count count}
+ *  - {@link Ext.data.Store#sum sum}
+ *  - {@link Ext.data.Store#min min}
+ *  - {@link Ext.data.Store#max max}
+ *  - {@link Ext.data.Store#average average}
+ *
+ * Alternatively, the summaryType can be a function definition. If this is the case,
+ * the function is called with an array of records to calculate the summary value.
+ * 
+ * ## Rendering
+ * 
+ * Similar to a column, the summary also supports a summaryRenderer function. This
+ * summaryRenderer is called before displaying a value. The function is optional, if
+ * not specified the default calculated value is shown. The summaryRenderer is called with:
+ *
+ *  - value {Object} - The calculated value.
+ *  - data {Object} - Contains all raw summary values for the row.
+ *  - field {String} - The name of the field we are calculating
+ * 
+ * ## Example Usage
+ *
+ *     Ext.define('TestResult', {
+ *         extend: 'Ext.data.Model',
+ *         fields: ['student', 'subject', {
+ *             name: 'mark',
+ *             type: 'int'
+ *         }]
+ *     });
+ *     
+ *     Ext.create('Ext.grid.Panel', {
+ *         width: 200,
+ *         height: 240,
+ *         renderTo: document.body,
+ *         features: [{
+ *             groupHeaderTpl: 'Subject: {name}',
+ *             ftype: 'groupingsummary'
+ *         }],
+ *         store: {
+ *             model: 'TestResult',
+ *             groupField: 'subject',
+ *             data: [{
+ *                 student: 'Student 1',
+ *                 subject: 'Math',
+ *                 mark: 84
+ *             },{
+ *                 student: 'Student 1',
+ *                 subject: 'Science',
+ *                 mark: 72
+ *             },{
+ *                 student: 'Student 2',
+ *                 subject: 'Math',
+ *                 mark: 96
+ *             },{
+ *                 student: 'Student 2',
+ *                 subject: 'Science',
+ *                 mark: 68
+ *             }]
+ *         },
+ *         columns: [{
+ *             dataIndex: 'student',
+ *             text: 'Name',
+ *             summaryType: 'count',
+ *             summaryRenderer: function(value){
+ *                 return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); 
+ *             }
+ *         }, {
+ *             dataIndex: 'mark',
+ *             text: 'Mark',
+ *             summaryType: 'average'
+ *         }]
+ *     });
+ */
+Ext.define('Ext.grid.feature.GroupingSummary', {
+    
+    /* Begin Definitions */
+    
+    extend: 'Ext.grid.feature.Grouping',
+    
+    alias: 'feature.groupingsummary',
+    
+    mixins: {
+        summary: 'Ext.grid.feature.AbstractSummary'
+    },
+    
+    /* End Definitions */
+
+     
+<span id='Ext-grid.feature.GroupingSummary-method-getFeatureTpl'>   /**
+</span>    * Modifies the row template to include the summary row.
+    * @private
+    * @return {String} The modified template
+    */
+   getFeatureTpl: function() {
+        var tpl = this.callParent(arguments);
+            
+        if (this.showSummaryRow) {
+            // lop off the end &lt;/tpl&gt; so we can attach it
+            tpl = tpl.replace('&lt;/tpl&gt;', '');
+            tpl += '{[this.printSummaryRow(xindex)]}&lt;/tpl&gt;';
+        }
+        return tpl;
+    },
+    
+<span id='Ext-grid.feature.GroupingSummary-method-getFragmentTpl'>    /**
+</span>     * Gets any fragments needed for the template.
+     * @private
+     * @return {Object} The fragments
+     */
+    getFragmentTpl: function() {
+        var me = this,
+            fragments = me.callParent();
+            
+        Ext.apply(fragments, me.getSummaryFragments());
+        if (me.showSummaryRow) {
+            // this gets called before render, so we'll setup the data here.
+            me.summaryGroups = me.view.store.getGroups();
+            me.summaryData = me.generateSummaryData();
+        }
+        return fragments;
+    },
+    
+<span id='Ext-grid.feature.GroupingSummary-method-getPrintData'>    /**
+</span>     * Gets the data for printing a template row
+     * @private
+     * @param {Number} index The index in the template
+     * @return {Array} The template values
+     */
+    getPrintData: function(index){
+        var me = this,
+            columns = me.view.headerCt.getColumnsForTpl(),
+            i = 0,
+            length = columns.length,
+            data = [],
+            name = me.summaryGroups[index - 1].name,
+            active = me.summaryData[name],
+            column;
+            
+        for (; i &lt; length; ++i) {
+            column = columns[i];
+            column.gridSummaryValue = this.getColumnValue(column, active);
+            data.push(column);
+        }
+        return data;
+    },
+    
+<span id='Ext-grid.feature.GroupingSummary-method-generateSummaryData'>    /**
+</span>     * Generates all of the summary data to be used when processing the template
+     * @private
+     * @return {Object} The summary data
+     */
+    generateSummaryData: function(){
+        var me = this,
+            data = {},
+            remoteData = {},
+            store = me.view.store,
+            groupField = this.getGroupField(),
+            reader = store.proxy.reader,
+            groups = me.summaryGroups,
+            columns = me.view.headerCt.getColumnsForTpl(),
+            i,
+            length,
+            fieldData,
+            root,
+            key,
+            comp;
+            
+        for (i = 0, length = groups.length; i &lt; length; ++i) {
+            data[groups[i].name] = {};
+        }
+        
+<span id='Ext-grid.feature.GroupingSummary-cfg-remoteRoot'>    /**
+</span>     * @cfg {String} remoteRoot.  The name of the property
+     * which contains the Array of summary objects.  Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
+     * It allows to use server-side calculated summaries.
+     */
+        if (me.remoteRoot &amp;&amp; reader.rawData) {
+            // reset reader root and rebuild extractors to extract summaries data
+            root = reader.root;
+            reader.root = me.remoteRoot;
+            reader.buildExtractors(true);
+            Ext.Array.each(reader.getRoot(reader.rawData), function(value) {
+                 data[value[groupField]] = value;
+                 data[value[groupField]]._remote = true;
+            });
+            // restore initial reader configuration
+            reader.root = root;
+            reader.buildExtractors(true);
+        }
+        
+        for (i = 0, length = columns.length; i &lt; length; ++i) {
+            comp = Ext.getCmp(columns[i].id);
+            fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);
+            
+            for (key in fieldData) {
+                if (fieldData.hasOwnProperty(key)) {
+                    if (!data[key]._remote) {
+                        data[key][comp.dataIndex] = fieldData[key];
+                    }
+                }
+            }
+        }
+        return data;
+    }
+});
+</pre></pre></body></html>
\ No newline at end of file