ColumnLayout.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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-ColumnLayout'>/**
  19. </span> * @private
  20. *
  21. * This class is used only by the grid's HeaderContainer docked child.
  22. *
  23. * It adds the ability to shrink the vertical size of the inner container element back if a grouped
  24. * column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.
  25. *
  26. * Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
  27. * `setPadding` on the columns so that they lay out correctly.
  28. */
  29. Ext.define('Ext.grid.ColumnLayout', {
  30. extend: 'Ext.layout.container.HBox',
  31. alias: 'layout.gridcolumn',
  32. type : 'gridcolumn',
  33. reserveOffset: false,
  34. firstHeaderCls: Ext.baseCSSPrefix + 'column-header-first',
  35. lastHeaderCls: Ext.baseCSSPrefix + 'column-header-last',
  36. initLayout: function() {
  37. this.grid = this.owner.up('[scrollerOwner]');
  38. this.callParent();
  39. },
  40. // Collect the height of the table of data upon layout begin
  41. beginLayout: function (ownerContext) {
  42. var me = this,
  43. grid = me.grid,
  44. view = grid.view,
  45. i = 0,
  46. items = me.getVisibleItems(),
  47. len = items.length,
  48. item;
  49. ownerContext.gridContext = ownerContext.context.getCmp(me.grid);
  50. // If we are one side of a locking grid, then if we are on the &quot;normal&quot; side, we have to grab the normal view
  51. // for use in determining whether to subtract scrollbar width from available width.
  52. // The locked side does not have scrollbars, so it should not look at the view.
  53. if (grid.lockable) {
  54. if (me.owner.up('tablepanel') === view.normalGrid) {
  55. view = view.normalGrid.getView();
  56. } else {
  57. view = null;
  58. }
  59. }
  60. me.callParent(arguments);
  61. // Unstretch child items before the layout which stretches them.
  62. for (; i &lt; len; i++) {
  63. item = items[i];
  64. item.removeCls([me.firstHeaderCls, me.lastHeaderCls]);
  65. item.el.setStyle({
  66. height: 'auto'
  67. });
  68. item.titleEl.setStyle({
  69. height: 'auto',
  70. paddingTop: '' // reset back to default padding of the style
  71. });
  72. }
  73. // Add special first/last classes
  74. if (len &gt; 0) {
  75. items[0].addCls(me.firstHeaderCls);
  76. items[len - 1].addCls(me.lastHeaderCls);
  77. }
  78. // If the owner is the grid's HeaderContainer, and the UI displays old fashioned scrollbars and there is a rendered View with data in it,
  79. // AND we are scrolling vertically:
  80. // collect the View context to interrogate it for overflow, and possibly invalidate it if there is overflow
  81. if (!me.owner.isHeader &amp;&amp; Ext.getScrollbarSize().width &amp;&amp; !grid.collapsed &amp;&amp; view &amp;&amp;
  82. view.table.dom &amp;&amp; (view.autoScroll || view.overflowY)) {
  83. ownerContext.viewContext = ownerContext.context.getCmp(view);
  84. }
  85. },
  86. roundFlex: function(width) {
  87. return Math.floor(width);
  88. },
  89. calculate: function(ownerContext) {
  90. var me = this,
  91. viewContext = ownerContext.viewContext,
  92. tableHeight,
  93. viewHeight;
  94. me.callParent(arguments);
  95. if (ownerContext.state.parallelDone) {
  96. ownerContext.setProp('columnWidthsDone', true);
  97. }
  98. // If we have a viewContext (Only created if there is an existing &lt;table&gt; within the view, AND we are scolling vertically AND scrollbars take up space)
  99. // we are not already in the second pass, and we are not shrinkWrapping...
  100. // Then we have to see if we know enough to determine whether there is vertical opverflow so that we can
  101. // invalidate and loop back for the second pass with a narrower target width.
  102. if (viewContext &amp;&amp; !ownerContext.state.overflowAdjust.width &amp;&amp; !ownerContext.gridContext.heightModel.shrinkWrap) {
  103. tableHeight = viewContext.tableContext.getProp('height');
  104. viewHeight = viewContext.getProp('height');
  105. // Heights of both view and its table content have not both been published; we cannot complete
  106. if (isNaN(tableHeight + viewHeight)) {
  107. me.done = false;
  108. }
  109. // Heights have been published, and there is vertical overflow; invalidate with a width adjustment to allow for the scrollbar
  110. else if (tableHeight &gt;= viewHeight) {
  111. ownerContext.gridContext.invalidate({
  112. after: function() {
  113. ownerContext.state.overflowAdjust = {
  114. width: Ext.getScrollbarSize().width,
  115. height: 0
  116. };
  117. }
  118. });
  119. }
  120. }
  121. },
  122. completeLayout: function(ownerContext) {
  123. var me = this,
  124. owner = me.owner,
  125. state = ownerContext.state,
  126. needsInvalidate = false,
  127. calculated = me.sizeModels.calculated,
  128. childItems, len, i, childContext, item;
  129. me.callParent(arguments);
  130. // If we have not been through this already, and the owning Container is configured
  131. // forceFit, is not a group column and and there is a valid width, then convert
  132. // widths to flexes, and loop back.
  133. if (!state.flexesCalculated &amp;&amp; owner.forceFit &amp;&amp; !owner.isHeader) {
  134. childItems = ownerContext.childItems;
  135. len = childItems.length;
  136. for (i = 0; i &lt; len; i++) {
  137. childContext = childItems[i];
  138. item = childContext.target;
  139. // For forceFit, just use allocated width as the flex value, and the proportions
  140. // will end up the same whatever HeaderContainer width they are being forced into.
  141. if (item.width) {
  142. item.flex = ownerContext.childItems[i].flex = item.width;
  143. delete item.width;
  144. childContext.widthModel = calculated;
  145. needsInvalidate = true;
  146. }
  147. }
  148. // Recalculate based upon all columns now being flexed instead of sized.
  149. // Set flag, so that we do not do this infinitely
  150. if (needsInvalidate) {
  151. me.cacheFlexes(ownerContext);
  152. ownerContext.invalidate({
  153. state: {
  154. flexesCalculated: true
  155. }
  156. });
  157. }
  158. }
  159. },
  160. finalizeLayout: function() {
  161. var me = this,
  162. i = 0,
  163. items,
  164. len,
  165. itemsHeight,
  166. owner = me.owner,
  167. titleEl = owner.titleEl;
  168. // Set up padding in items
  169. items = me.getVisibleItems();
  170. len = items.length;
  171. // header container's items take up the whole height
  172. itemsHeight = owner.el.getViewSize().height;
  173. if (titleEl) {
  174. // if owner is a grouped column with children, we need to subtract the titleEl's height
  175. // to determine the remaining available height for the child items
  176. itemsHeight -= titleEl.getHeight();
  177. }
  178. for (; i &lt; len; i++) {
  179. items[i].setPadding(itemsHeight);
  180. }
  181. },
  182. // FIX: when flexing we actually don't have enough space as we would
  183. // typically because of the scrollOffset on the GridView, must reserve this
  184. publishInnerCtSize: function(ownerContext) {
  185. var me = this,
  186. size = ownerContext.state.boxPlan.targetSize,
  187. cw = ownerContext.peek('contentWidth'),
  188. view;
  189. // InnerCt MUST stretch to accommodate all columns so that left/right scrolling is enabled in the header container.
  190. if ((cw != null) &amp;&amp; !me.owner.isHeader) {
  191. size.width = cw;
  192. // innerCt must also encompass any vertical scrollbar width if there may be one
  193. view = me.owner.ownerCt.view;
  194. if (view.autoScroll || view.overflowY) {
  195. size.width += Ext.getScrollbarSize().width;
  196. }
  197. }
  198. return me.callParent(arguments);
  199. }
  200. });
  201. </pre>
  202. </body>
  203. </html>