Summary.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. Ext.define('Ext.overrides.grid.feature.Summary', {
  2. override: 'Ext.grid.feature.Summary',
  3. // override
  4. fixed: undefined,
  5. fixedSummaryCls: Ext.baseCSSPrefix + 'fixed-summary',
  6. init: function (grid) {
  7. var me = this,
  8. view = me.view,
  9. dock = me.dock,
  10. fixed = me.fixed;
  11. me.callParent([grid]);
  12. // when 'fixed' is true, 'dock' must be a defined value, default 'bottom'
  13. if(fixed) {
  14. dock = me.dock = dock || 'bottom';
  15. }
  16. if (dock) {
  17. grid.addBodyCls(me.panelBodyCls + dock);
  18. grid.headerCt.on({
  19. add: me.onStoreUpdate,
  20. // we need to fire onStoreUpdate afterlayout for docked items
  21. // to re-run the renderSummaryRow on show/hide columns.
  22. afterlayout: me.onStoreUpdate,
  23. remove: me.onStoreUpdate,
  24. scope: me
  25. });
  26. grid.on({
  27. beforerender: function () {
  28. var tableCls = [me.summaryTableCls];
  29. if (view.columnLines) {
  30. tableCls[tableCls.length] = view.ownerCt.colLinesCls;
  31. }
  32. me.summaryBar = grid.addDocked({
  33. childEls: ['innerCt', 'item'],
  34. renderTpl: [
  35. '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
  36. '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
  37. '<tr class="' + me.summaryRowCls + '"></tr>',
  38. '</table>',
  39. '</div>'
  40. ],
  41. scrollable: {
  42. x: false,
  43. y: false
  44. },
  45. hidden: !me.showSummaryRow,
  46. itemId: 'summaryBar',
  47. cls: [me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock, (fixed ? me.fixedSummaryCls : '')],
  48. xtype: 'component',
  49. dock: dock,
  50. weight: 10000000
  51. })[0];
  52. },
  53. afterrender: function () {
  54. grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable(), 'x');
  55. me.onStoreUpdate();
  56. me.columnSizer = me.summaryBar.el;
  57. },
  58. single: true
  59. });
  60. } else {
  61. if (grid.bufferedRenderer) {
  62. me.wrapsItem = true;
  63. view.addRowTpl(me.fullSummaryTpl).summaryFeature = me;
  64. view.on('refresh', me.onViewRefresh, me);
  65. } else {
  66. me.wrapsItem = false;
  67. me.view.addFooterFn(me.renderSummaryRow);
  68. }
  69. }
  70. grid.headerCt.on({
  71. afterlayout: me.afterHeaderCtLayout,
  72. scope: me
  73. });
  74. grid.ownerGrid.on({
  75. beforereconfigure: me.onBeforeReconfigure,
  76. columnmove: me.onStoreUpdate,
  77. scope: me
  78. });
  79. me.bindStore(grid, grid.getStore());
  80. },
  81. onStoreUpdate: function () {
  82. var me = this,
  83. view = me.view,
  84. selector = me.summaryRowSelector,
  85. dock = me.dock,
  86. fixed = me.fixed,
  87. record, newRowDom, oldRowDom, newCellDoms, p;
  88. if (!view.rendered) {
  89. return;
  90. }
  91. record = me.createSummaryRecord(view);
  92. newRowDom = Ext.fly(view.createRowElement(record, -1)).down(selector, true);
  93. if (!newRowDom) {
  94. return;
  95. }
  96. if(fixed) {
  97. newCellDoms = newRowDom.children;
  98. for(let i = newCellDoms.length - 1; i >= 0 ; i--) {
  99. let innerText = newCellDoms[i].innerText.trim();
  100. if(innerText.length === 0) {
  101. newRowDom.removeChild(newCellDoms[i])
  102. }else {
  103. newCellDoms[i].style.removeProperty('width');
  104. }
  105. }
  106. }
  107. // Summary row is inside the docked summaryBar Component
  108. if (dock) {
  109. p = me.summaryBar.item.dom.firstChild;
  110. oldRowDom = p.firstChild;
  111. p.insertBefore(newRowDom, oldRowDom);
  112. p.removeChild(oldRowDom);
  113. }
  114. // Summary row is a regular row in a THEAD inside the View.
  115. // Downlinked through the summary record's ID
  116. else {
  117. oldRowDom = view.el.down(selector, true);
  118. p = oldRowDom && oldRowDom.parentNode;
  119. if (p) {
  120. p.removeChild(oldRowDom);
  121. }
  122. // We're always inserting the new summary row into the last rendered row,
  123. // unless no rows exist. In that case we will be appending to the special
  124. // placeholder in the node container.
  125. p = view.getRow(view.all.last());
  126. if (p) {
  127. p = p.parentElement;
  128. }
  129. // View might not have nodeContainer yet.
  130. else {
  131. p = me.getSummaryRowPlaceholder(view);
  132. p = p && p.tBodies && p.tBodies[0];
  133. }
  134. if (p) {
  135. p.appendChild(newRowDom);
  136. }
  137. }
  138. },
  139. // Synchronize column widths in the docked summary Component or the inline summary row
  140. // depending on whether we are docked or not.
  141. afterHeaderCtLayout: function (headerCt) {
  142. var me = this,
  143. view = me.view,
  144. columns = view.getVisibleColumnManager().getColumns(),
  145. column,
  146. len = columns.length,
  147. i,
  148. summaryEl,
  149. el, width, innerCt;
  150. if (me.showSummaryRow && view.refreshCounter) {
  151. if(me.fixed) {
  152. return;
  153. }
  154. if (me.dock) {
  155. summaryEl = me.summaryBar.el;
  156. width = headerCt.getTableWidth();
  157. innerCt = me.summaryBar.innerCt;
  158. // Stretch the innerCt of the summary bar upon headerCt layout
  159. me.summaryBar.item.setWidth(width);
  160. // headerCt's tooNarrow flag is set by its layout if the columns overflow.
  161. // Must not measure+set in after layout phase, this is a write phase.
  162. if (headerCt.tooNarrow) {
  163. width += Ext.getScrollbarSize().width;
  164. }
  165. innerCt.setWidth(width);
  166. } else {
  167. summaryEl = Ext.fly(Ext.fly(view.getNodeContainer()).down('.' + me.summaryItemCls, true));
  168. }
  169. // If the layout was in response to a clearView, there'll be no summary element
  170. if (summaryEl) {
  171. for (i = 0; i < len; i++) {
  172. column = columns[i];
  173. el = summaryEl.down(view.getCellSelector(column), true);
  174. if (el) {
  175. Ext.fly(el).setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
  176. }
  177. }
  178. }
  179. }
  180. },
  181. });