Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Summary.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-grid-feature-Summary'>/**
19 </span> * @class Ext.grid.feature.Summary
20  * @extends Ext.grid.feature.AbstractSummary
21  * 
22  * This feature is used to place a summary row at the bottom of the grid. If using a grouping, 
23  * see {@link Ext.grid.feature.GroupingSummary}. There are 2 aspects to calculating the summaries, 
24  * calculation and rendering.
25  * 
26  * ## Calculation
27  * The summary value needs to be calculated for each column in the grid. This is controlled
28  * by the summaryType option specified on the column. There are several built in summary types,
29  * which can be specified as a string on the column configuration. These call underlying methods
30  * on the store:
31  *
32  *  - {@link Ext.data.Store#count count}
33  *  - {@link Ext.data.Store#sum sum}
34  *  - {@link Ext.data.Store#min min}
35  *  - {@link Ext.data.Store#max max}
36  *  - {@link Ext.data.Store#average average}
37  *
38  * Alternatively, the summaryType can be a function definition. If this is the case,
39  * the function is called with an array of records to calculate the summary value.
40  * 
41  * ## Rendering
42  * Similar to a column, the summary also supports a summaryRenderer function. This
43  * summaryRenderer is called before displaying a value. The function is optional, if
44  * not specified the default calculated value is shown. The summaryRenderer is called with:
45  *
46  *  - value {Object} - The calculated value.
47  *  - summaryData {Object} - Contains all raw summary values for the row.
48  *  - field {String} - The name of the field we are calculating
49  * 
50  * ## Example Usage
51  *
52  *     @example
53  *     Ext.define('TestResult', {
54  *         extend: 'Ext.data.Model',
55  *         fields: ['student', {
56  *             name: 'mark',
57  *             type: 'int'
58  *         }]
59  *     });
60  *     
61  *     Ext.create('Ext.grid.Panel', {
62  *         width: 200,
63  *         height: 140,
64  *         renderTo: document.body,
65  *         features: [{
66  *             ftype: 'summary'
67  *         }],
68  *         store: {
69  *             model: 'TestResult',
70  *             data: [{
71  *                 student: 'Student 1',
72  *                 mark: 84
73  *             },{
74  *                 student: 'Student 2',
75  *                 mark: 72
76  *             },{
77  *                 student: 'Student 3',
78  *                 mark: 96
79  *             },{
80  *                 student: 'Student 4',
81  *                 mark: 68
82  *             }]
83  *         },
84  *         columns: [{
85  *             dataIndex: 'student',
86  *             text: 'Name',
87  *             summaryType: 'count',
88  *             summaryRenderer: function(value, summaryData, dataIndex) {
89  *                 return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); 
90  *             }
91  *         }, {
92  *             dataIndex: 'mark',
93  *             text: 'Mark',
94  *             summaryType: 'average'
95  *         }]
96  *     });
97  */
98 Ext.define('Ext.grid.feature.Summary', {
99     
100     /* Begin Definitions */
101     
102     extend: 'Ext.grid.feature.AbstractSummary',
103     
104     alias: 'feature.summary',
105     
106     /* End Definitions */
107     
108 <span id='Ext-grid-feature-Summary-method-getFragmentTpl'>    /**
109 </span>     * Gets any fragments needed for the template.
110      * @private
111      * @return {Object} The fragments
112      */
113     getFragmentTpl: function() {
114         // this gets called before render, so we'll setup the data here.
115         this.summaryData = this.generateSummaryData(); 
116         return this.getSummaryFragments();
117     },
118     
119 <span id='Ext-grid-feature-Summary-method-getTableFragments'>    /**
120 </span>     * Overrides the closeRows method on the template so we can include our own custom
121      * footer.
122      * @private
123      * @return {Object} The custom fragments
124      */
125     getTableFragments: function(){
126         if (this.showSummaryRow) {
127             return {
128                 closeRows: this.closeRows
129             };
130         }
131     },
132     
133 <span id='Ext-grid-feature-Summary-method-closeRows'>    /**
134 </span>     * Provide our own custom footer for the grid.
135      * @private
136      * @return {String} The custom footer
137      */
138     closeRows: function() {
139         return '&lt;/tpl&gt;{[this.printSummaryRow()]}';
140     },
141     
142 <span id='Ext-grid-feature-Summary-method-getPrintData'>    /**
143 </span>     * Gets the data for printing a template row
144      * @private
145      * @param {Number} index The index in the template
146      * @return {Array} The template values
147      */
148     getPrintData: function(index){
149         var me = this,
150             columns = me.view.headerCt.getColumnsForTpl(),
151             i = 0,
152             length = columns.length,
153             data = [],
154             active = me.summaryData,
155             column;
156             
157         for (; i &lt; length; ++i) {
158             column = columns[i];
159             column.gridSummaryValue = this.getColumnValue(column, active);
160             data.push(column);
161         }
162         return data;
163     },
164     
165 <span id='Ext-grid-feature-Summary-method-generateSummaryData'>    /**
166 </span>     * Generates all of the summary data to be used when processing the template
167      * @private
168      * @return {Object} The summary data
169      */
170     generateSummaryData: function(){
171         var me = this,
172             data = {},
173             store = me.view.store,
174             columns = me.view.headerCt.getColumnsForTpl(),
175             i = 0,
176             length = columns.length,
177             fieldData,
178             key,
179             comp;
180             
181         for (i = 0, length = columns.length; i &lt; length; ++i) {
182             comp = Ext.getCmp(columns[i].id);
183             data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
184         }
185         return data;
186     }
187 });</pre>
188 </body>
189 </html>