1 <!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.Summary'>/**
2 </span> * @class Ext.grid.feature.Summary
3 * @extends Ext.grid.feature.AbstractSummary
5 * This feature is used to place a summary row at the bottom of the grid. If using a grouping,
6 * see {@link Ext.grid.feature.GroupingSummary}. There are 2 aspects to calculating the summaries,
7 * calculation and rendering.
10 * The summary value needs to be calculated for each column in the grid. This is controlled
11 * by the summaryType option specified on the column. There are several built in summary types,
12 * which can be specified as a string on the column configuration. These call underlying methods
15 * - {@link Ext.data.Store#count count}
16 * - {@link Ext.data.Store#sum sum}
17 * - {@link Ext.data.Store#min min}
18 * - {@link Ext.data.Store#max max}
19 * - {@link Ext.data.Store#average average}
21 * Alternatively, the summaryType can be a function definition. If this is the case,
22 * the function is called with an array of records to calculate the summary value.
25 * Similar to a column, the summary also supports a summaryRenderer function. This
26 * summaryRenderer is called before displaying a value. The function is optional, if
27 * not specified the default calculated value is shown. The summaryRenderer is called with:
29 * - value {Object} - The calculated value.
30 * - data {Object} - Contains all raw summary values for the row.
31 * - field {String} - The name of the field we are calculating
35 * Ext.define('TestResult', {
36 * extend: 'Ext.data.Model',
37 * fields: ['student', {
43 * Ext.create('Ext.grid.Panel', {
46 * renderTo: document.body,
51 * model: 'TestResult',
53 * student: 'Student 1',
56 * student: 'Student 2',
59 * student: 'Student 3',
62 * student: 'Student 4',
67 * dataIndex: 'student',
69 * summaryType: 'count',
70 * summaryRenderer: function(value){
71 * return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
76 * summaryType: 'average'
80 Ext.define('Ext.grid.feature.Summary', {
82 /* Begin Definitions */
84 extend: 'Ext.grid.feature.AbstractSummary',
86 alias: 'feature.summary',
90 <span id='Ext-grid.feature.Summary-method-getFragmentTpl'> /**
91 </span> * Gets any fragments needed for the template.
93 * @return {Object} The fragments
95 getFragmentTpl: function() {
96 // this gets called before render, so we'll setup the data here.
97 this.summaryData = this.generateSummaryData();
98 return this.getSummaryFragments();
101 <span id='Ext-grid.feature.Summary-method-getTableFragments'> /**
102 </span> * Overrides the closeRows method on the template so we can include our own custom
105 * @return {Object} The custom fragments
107 getTableFragments: function(){
108 if (this.showSummaryRow) {
110 closeRows: this.closeRows
115 <span id='Ext-grid.feature.Summary-method-closeRows'> /**
116 </span> * Provide our own custom footer for the grid.
118 * @return {String} The custom footer
120 closeRows: function() {
121 return '</tpl>{[this.printSummaryRow()]}';
124 <span id='Ext-grid.feature.Summary-method-getPrintData'> /**
125 </span> * Gets the data for printing a template row
127 * @param {Number} index The index in the template
128 * @return {Array} The template values
130 getPrintData: function(index){
132 columns = me.view.headerCt.getColumnsForTpl(),
134 length = columns.length,
136 active = me.summaryData,
139 for (; i < length; ++i) {
141 column.gridSummaryValue = this.getColumnValue(column, active);
147 <span id='Ext-grid.feature.Summary-method-generateSummaryData'> /**
148 </span> * Generates all of the summary data to be used when processing the template
150 * @return {Object} The summary data
152 generateSummaryData: function(){
155 store = me.view.store,
156 columns = me.view.headerCt.getColumnsForTpl(),
158 length = columns.length,
163 for (i = 0, length = columns.length; i < length; ++i) {
164 comp = Ext.getCmp(columns[i].id);
165 data[comp.dataIndex] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
169 });</pre></pre></body></html>