GroupingSummary.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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-GroupingSummary'>/**
  19. </span> * This feature adds an aggregate summary row at the bottom of each group that is provided
  20. * by the {@link Ext.grid.feature.Grouping} feature. There are two aspects to the summary:
  21. *
  22. * ## Calculation
  23. *
  24. * The summary value needs to be calculated for each column in the grid. This is controlled
  25. * by the summaryType option specified on the column. There are several built in summary types,
  26. * which can be specified as a string on the column configuration. These call underlying methods
  27. * on the store:
  28. *
  29. * - {@link Ext.data.Store#count count}
  30. * - {@link Ext.data.Store#sum sum}
  31. * - {@link Ext.data.Store#min min}
  32. * - {@link Ext.data.Store#max max}
  33. * - {@link Ext.data.Store#average average}
  34. *
  35. * Alternatively, the summaryType can be a function definition. If this is the case,
  36. * the function is called with an array of records to calculate the summary value.
  37. *
  38. * ## Rendering
  39. *
  40. * Similar to a column, the summary also supports a summaryRenderer function. This
  41. * summaryRenderer is called before displaying a value. The function is optional, if
  42. * not specified the default calculated value is shown. The summaryRenderer is called with:
  43. *
  44. * - value {Object} - The calculated value.
  45. * - summaryData {Object} - Contains all raw summary values for the row.
  46. * - field {String} - The name of the field we are calculating
  47. *
  48. * ## Example Usage
  49. *
  50. * @example
  51. * Ext.define('TestResult', {
  52. * extend: 'Ext.data.Model',
  53. * fields: ['student', 'subject', {
  54. * name: 'mark',
  55. * type: 'int'
  56. * }]
  57. * });
  58. *
  59. * Ext.create('Ext.grid.Panel', {
  60. * width: 200,
  61. * height: 240,
  62. * renderTo: document.body,
  63. * features: [{
  64. * groupHeaderTpl: 'Subject: {name}',
  65. * ftype: 'groupingsummary'
  66. * }],
  67. * store: {
  68. * model: 'TestResult',
  69. * groupField: 'subject',
  70. * data: [{
  71. * student: 'Student 1',
  72. * subject: 'Math',
  73. * mark: 84
  74. * },{
  75. * student: 'Student 1',
  76. * subject: 'Science',
  77. * mark: 72
  78. * },{
  79. * student: 'Student 2',
  80. * subject: 'Math',
  81. * mark: 96
  82. * },{
  83. * student: 'Student 2',
  84. * subject: 'Science',
  85. * mark: 68
  86. * }]
  87. * },
  88. * columns: [{
  89. * dataIndex: 'student',
  90. * text: 'Name',
  91. * summaryType: 'count',
  92. * summaryRenderer: function(value){
  93. * return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
  94. * }
  95. * }, {
  96. * dataIndex: 'mark',
  97. * text: 'Mark',
  98. * summaryType: 'average'
  99. * }]
  100. * });
  101. */
  102. Ext.define('Ext.grid.feature.GroupingSummary', {
  103. /* Begin Definitions */
  104. extend: 'Ext.grid.feature.Grouping',
  105. alias: 'feature.groupingsummary',
  106. mixins: {
  107. summary: 'Ext.grid.feature.AbstractSummary'
  108. },
  109. /* End Definitions */
  110. init: function() {
  111. this.mixins.summary.init.call(this);
  112. },
  113. <span id='Ext-grid-feature-GroupingSummary-method-getFeatureTpl'> /**
  114. </span> * Modifies the row template to include the summary row.
  115. * @private
  116. * @return {String} The modified template
  117. */
  118. getFeatureTpl: function() {
  119. var tpl = this.callParent(arguments);
  120. if (this.showSummaryRow) {
  121. // lop off the end &lt;/tpl&gt; so we can attach it
  122. tpl = tpl.replace('&lt;/tpl&gt;', '');
  123. tpl += '{[this.printSummaryRow(xindex)]}&lt;/tpl&gt;';
  124. }
  125. return tpl;
  126. },
  127. <span id='Ext-grid-feature-GroupingSummary-method-getFragmentTpl'> /**
  128. </span> * Gets any fragments needed for the template.
  129. * @private
  130. * @return {Object} The fragments
  131. */
  132. getFragmentTpl: function() {
  133. var me = this,
  134. fragments = me.callParent();
  135. Ext.apply(fragments, me.getSummaryFragments());
  136. if (me.showSummaryRow) {
  137. // this gets called before render, so we'll setup the data here.
  138. me.summaryGroups = me.view.store.getGroups();
  139. me.summaryData = me.generateSummaryData();
  140. }
  141. return fragments;
  142. },
  143. <span id='Ext-grid-feature-GroupingSummary-method-getPrintData'> /**
  144. </span> * Gets the data for printing a template row
  145. * @private
  146. * @param {Number} index The index in the template
  147. * @return {Array} The template values
  148. */
  149. getPrintData: function(index){
  150. var me = this,
  151. columns = me.view.headerCt.getColumnsForTpl(),
  152. i = 0,
  153. length = columns.length,
  154. data = [],
  155. name = me.summaryGroups[index - 1].name,
  156. active = me.summaryData[name],
  157. column;
  158. for (; i &lt; length; ++i) {
  159. column = columns[i];
  160. column.gridSummaryValue = this.getColumnValue(column, active);
  161. data.push(column);
  162. }
  163. return data;
  164. },
  165. <span id='Ext-grid-feature-GroupingSummary-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. remoteData = {},
  174. store = me.view.store,
  175. groupField = this.getGroupField(),
  176. reader = store.proxy.reader,
  177. groups = me.summaryGroups,
  178. columns = me.view.headerCt.getColumnsForTpl(),
  179. remote,
  180. i,
  181. length,
  182. fieldData,
  183. root,
  184. key,
  185. comp,
  186. summaryRows,
  187. s,
  188. sLen,
  189. convertedSummaryRow;
  190. for (i = 0, length = groups.length; i &lt; length; ++i) {
  191. data[groups[i].name] = {};
  192. }
  193. <span id='Ext-grid-feature-GroupingSummary-cfg-remoteRoot'> /**
  194. </span> * @cfg {String} [remoteRoot=undefined]
  195. * The name of the property which contains the Array of summary objects.
  196. * It allows to use server-side calculated summaries.
  197. */
  198. if (me.remoteRoot &amp;&amp; reader.rawData) {
  199. // reset reader root and rebuild extractors to extract summaries data
  200. root = reader.root;
  201. reader.root = me.remoteRoot;
  202. reader.buildExtractors(true);
  203. summaryRows = reader.getRoot(reader.rawData);
  204. sLen = summaryRows.length;
  205. // Ensure the Reader has a data conversion function to convert a raw data row into a Record data hash
  206. if (!reader.convertRecordData) {
  207. reader.buildExtractors();
  208. }
  209. for (s = 0; s &lt; sLen; s++) {
  210. convertedSummaryRow = {};
  211. // Convert a raw data row into a Record's hash object using the Reader
  212. reader.convertRecordData(convertedSummaryRow, summaryRows[s]);
  213. remoteData[convertedSummaryRow[groupField]] = convertedSummaryRow;
  214. }
  215. // restore initial reader configuration
  216. reader.root = root;
  217. reader.buildExtractors(true);
  218. }
  219. for (i = 0, length = columns.length; i &lt; length; ++i) {
  220. comp = Ext.getCmp(columns[i].id);
  221. fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);
  222. for (key in fieldData) {
  223. if (fieldData.hasOwnProperty(key)) {
  224. data[key][comp.id] = fieldData[key];
  225. }
  226. }
  227. for (key in remoteData) {
  228. if (remoteData.hasOwnProperty(key)) {
  229. remote = remoteData[key][comp.dataIndex];
  230. if (remote !== undefined &amp;&amp; data[key] !== undefined) {
  231. data[key][comp.id] = remote;
  232. }
  233. }
  234. }
  235. }
  236. return data;
  237. }
  238. });
  239. </pre>
  240. </body>
  241. </html>