Summary.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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> * This feature is used to place a summary row at the bottom of the grid. If using a grouping,
  20. * see {@link Ext.grid.feature.GroupingSummary}. There are 2 aspects to calculating the summaries,
  21. * calculation and rendering.
  22. *
  23. * ## Calculation
  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. * Similar to a column, the summary also supports a summaryRenderer function. This
  40. * summaryRenderer is called before displaying a value. The function is optional, if
  41. * not specified the default calculated value is shown. The summaryRenderer is called with:
  42. *
  43. * - value {Object} - The calculated value.
  44. * - summaryData {Object} - Contains all raw summary values for the row.
  45. * - field {String} - The name of the field we are calculating
  46. *
  47. * ## Example Usage
  48. *
  49. * @example
  50. * Ext.define('TestResult', {
  51. * extend: 'Ext.data.Model',
  52. * fields: ['student', {
  53. * name: 'mark',
  54. * type: 'int'
  55. * }]
  56. * });
  57. *
  58. * Ext.create('Ext.grid.Panel', {
  59. * width: 200,
  60. * height: 140,
  61. * renderTo: document.body,
  62. * features: [{
  63. * ftype: 'summary'
  64. * }],
  65. * store: {
  66. * model: 'TestResult',
  67. * data: [{
  68. * student: 'Student 1',
  69. * mark: 84
  70. * },{
  71. * student: 'Student 2',
  72. * mark: 72
  73. * },{
  74. * student: 'Student 3',
  75. * mark: 96
  76. * },{
  77. * student: 'Student 4',
  78. * mark: 68
  79. * }]
  80. * },
  81. * columns: [{
  82. * dataIndex: 'student',
  83. * text: 'Name',
  84. * summaryType: 'count',
  85. * summaryRenderer: function(value, summaryData, dataIndex) {
  86. * return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
  87. * }
  88. * }, {
  89. * dataIndex: 'mark',
  90. * text: 'Mark',
  91. * summaryType: 'average'
  92. * }]
  93. * });
  94. */
  95. Ext.define('Ext.grid.feature.Summary', {
  96. /* Begin Definitions */
  97. extend: 'Ext.grid.feature.AbstractSummary',
  98. alias: 'feature.summary',
  99. /* End Definitions */
  100. <span id='Ext-grid-feature-Summary-method-getFragmentTpl'> /**
  101. </span> * Gets any fragments needed for the template.
  102. * @private
  103. * @return {Object} The fragments
  104. */
  105. getFragmentTpl: function() {
  106. // this gets called before render, so we'll setup the data here.
  107. this.summaryData = this.generateSummaryData();
  108. return this.getSummaryFragments();
  109. },
  110. <span id='Ext-grid-feature-Summary-method-getTableFragments'> /**
  111. </span> * Overrides the closeRows method on the template so we can include our own custom
  112. * footer.
  113. * @private
  114. * @return {Object} The custom fragments
  115. */
  116. getTableFragments: function(){
  117. if (this.showSummaryRow) {
  118. return {
  119. closeRows: this.closeRows
  120. };
  121. }
  122. },
  123. <span id='Ext-grid-feature-Summary-method-closeRows'> /**
  124. </span> * Provide our own custom footer for the grid.
  125. * @private
  126. * @return {String} The custom footer
  127. */
  128. closeRows: function() {
  129. return '&lt;/tpl&gt;{[this.printSummaryRow()]}';
  130. },
  131. <span id='Ext-grid-feature-Summary-method-getPrintData'> /**
  132. </span> * Gets the data for printing a template row
  133. * @private
  134. * @param {Number} index The index in the template
  135. * @return {Array} The template values
  136. */
  137. getPrintData: function(index){
  138. var me = this,
  139. columns = me.view.headerCt.getColumnsForTpl(),
  140. i = 0,
  141. length = columns.length,
  142. data = [],
  143. active = me.summaryData,
  144. column;
  145. for (; i &lt; length; ++i) {
  146. column = columns[i];
  147. column.gridSummaryValue = this.getColumnValue(column, active);
  148. data.push(column);
  149. }
  150. return data;
  151. },
  152. <span id='Ext-grid-feature-Summary-method-generateSummaryData'> /**
  153. </span> * Generates all of the summary data to be used when processing the template
  154. * @private
  155. * @return {Object} The summary data
  156. */
  157. generateSummaryData: function(){
  158. var me = this,
  159. data = {},
  160. store = me.view.store,
  161. columns = me.view.headerCt.getColumnsForTpl(),
  162. i = 0,
  163. length = columns.length,
  164. fieldData,
  165. key,
  166. comp;
  167. for (i = 0, length = columns.length; i &lt; length; ++i) {
  168. comp = Ext.getCmp(columns[i].id);
  169. data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
  170. }
  171. return data;
  172. }
  173. });</pre>
  174. </body>
  175. </html>