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>