Auto.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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-layout-component-Auto'>/**
  19. </span> * The class is the default component layout for {@link Ext.Component} when no explicit
  20. * `{@link Ext.Component#componentLayout componentLayout}` is configured.
  21. *
  22. * This class uses template methods to perform the individual aspects of measurement,
  23. * calculation and publication of results. The methods called depend on the component's
  24. * {@link Ext.AbstractComponent#getSizeModel size model}.
  25. *
  26. * ## configured / calculated
  27. *
  28. * In either of these size models, the dimension of the outer element is of a known size.
  29. * The size is found in the `ownerContext` (the {@link Ext.layout.ContextItem} for the owner
  30. * component) as either &quot;width&quot; or &quot;height&quot;. This value, if available, is passed to the
  31. * `publishInnerWidth` or `publishInnerHeight` method, respectively.
  32. *
  33. * ## shrinkWrap
  34. *
  35. * When a dimension uses the `shrinkWrap` size model, that means the content is measured,
  36. * then the outer (owner) size is calculated and published.
  37. *
  38. * For example, for a shrinkWrap width, the following sequence of calls are made:
  39. *
  40. * - `Ext.layout.component.Component#measureContentWidth`
  41. * - `publishOwnerWidth`
  42. * - `calculateOwnerWidthFromContentWidth`
  43. * - `publishInnerWidth` (in the event of hitting a min/maxWidth constraint)
  44. *
  45. * ## natural
  46. *
  47. * When a dimension uses the `natural` size model, the measurement is made on the outer
  48. * (owner) element. This size is then used to determine the content area in much the same
  49. * way as if the outer element had a `configured` or `calculated` size model.
  50. *
  51. * - `Ext.layout.component.Component#measureOwnerWidth`
  52. * - `publishInnerWidth`
  53. *
  54. * @protected
  55. */
  56. Ext.define('Ext.layout.component.Auto', {
  57. /* Begin Definitions */
  58. alias: 'layout.autocomponent',
  59. extend: 'Ext.layout.component.Component',
  60. /* End Definitions */
  61. type: 'autocomponent',
  62. <span id='Ext-layout-component-Auto-cfg-setHeightInDom'> /**
  63. </span> * @cfg {Boolean} [setHeightInDom=false]
  64. * @protected
  65. * When publishing height of an auto Component, it is usually not written to the DOM.
  66. * Setting this to `true` overrides this behaviour.
  67. */
  68. setHeightInDom: false,
  69. <span id='Ext-layout-component-Auto-cfg-setWidthInDom'> /**
  70. </span> * @cfg {Boolean} [setWidthInDom=false]
  71. * @protected
  72. * When publishing width of an auto Component, it is usually not written to the DOM.
  73. * Setting this to `true` overrides this behaviour.
  74. */
  75. setWidthInDom: false,
  76. waitForOuterHeightInDom: false,
  77. waitForOuterWidthInDom: false,
  78. beginLayoutCycle: function(ownerContext, firstCycle){
  79. var me = this,
  80. lastWidthModel = me.lastWidthModel,
  81. lastHeightModel = me.lastHeightModel,
  82. owner = me.owner;
  83. me.callParent(arguments);
  84. if (lastWidthModel &amp;&amp; lastWidthModel.fixed &amp;&amp; ownerContext.widthModel.shrinkWrap) {
  85. owner.el.setWidth(null);
  86. }
  87. if (lastHeightModel &amp;&amp; lastHeightModel.fixed &amp;&amp; ownerContext.heightModel.shrinkWrap) {
  88. owner.el.setHeight(null);
  89. }
  90. },
  91. calculate: function(ownerContext) {
  92. var me = this,
  93. measurement = me.measureAutoDimensions(ownerContext),
  94. heightModel = ownerContext.heightModel,
  95. widthModel = ownerContext.widthModel,
  96. width, height;
  97. // It is generally important to process widths before heights, since widths can
  98. // often effect heights...
  99. if (measurement.gotWidth) {
  100. if (widthModel.shrinkWrap) {
  101. me.publishOwnerWidth(ownerContext, measurement.contentWidth);
  102. } else if (me.publishInnerWidth) {
  103. me.publishInnerWidth(ownerContext, measurement.width);
  104. }
  105. } else if (!widthModel.auto &amp;&amp; me.publishInnerWidth) {
  106. width = me.waitForOuterWidthInDom ? ownerContext.getDomProp('width')
  107. : ownerContext.getProp('width');
  108. if (width === undefined) {
  109. me.done = false;
  110. } else {
  111. me.publishInnerWidth(ownerContext, width);
  112. }
  113. }
  114. if (measurement.gotHeight) {
  115. if (heightModel.shrinkWrap) {
  116. me.publishOwnerHeight(ownerContext, measurement.contentHeight);
  117. } else if (me.publishInnerHeight) {
  118. me.publishInnerHeight(ownerContext, measurement.height);
  119. }
  120. } else if (!heightModel.auto &amp;&amp; me.publishInnerHeight) {
  121. height = me.waitForOuterHeightInDom ? ownerContext.getDomProp('height')
  122. : ownerContext.getProp('height');
  123. if (height === undefined) {
  124. me.done = false;
  125. } else {
  126. me.publishInnerHeight(ownerContext, height);
  127. }
  128. }
  129. if (!measurement.gotAll) {
  130. me.done = false;
  131. }
  132. },
  133. calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
  134. return contentHeight + ownerContext.getFrameInfo().height;
  135. },
  136. calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
  137. return contentWidth + ownerContext.getFrameInfo().width;
  138. },
  139. publishOwnerHeight: function (ownerContext, contentHeight) {
  140. var me = this,
  141. owner = me.owner,
  142. height = me.calculateOwnerHeightFromContentHeight(ownerContext, contentHeight),
  143. constrainedHeight, dirty, heightModel;
  144. if (isNaN(height)) {
  145. me.done = false;
  146. } else {
  147. constrainedHeight = Ext.Number.constrain(height, owner.minHeight, owner.maxHeight);
  148. if (constrainedHeight == height) {
  149. dirty = me.setHeightInDom;
  150. } else {
  151. heightModel = me.sizeModels[
  152. (constrainedHeight &lt; height) ? 'constrainedMax' : 'constrainedMin'];
  153. height = constrainedHeight;
  154. if (ownerContext.heightModel.calculatedFromShrinkWrap) {
  155. // Don't bother to invalidate since that will come soon... but we need
  156. // to signal our ownerLayout that we need an invalidate to actually
  157. // make good on the determined (constrained) size!
  158. ownerContext.heightModel = heightModel;
  159. } else {
  160. ownerContext.invalidate({ heightModel: heightModel });
  161. }
  162. }
  163. ownerContext.setHeight(height, dirty);
  164. }
  165. },
  166. publishOwnerWidth: function (ownerContext, contentWidth) {
  167. var me = this,
  168. owner = me.owner,
  169. width = me.calculateOwnerWidthFromContentWidth(ownerContext, contentWidth),
  170. constrainedWidth, dirty, widthModel;
  171. if (isNaN(width)) {
  172. me.done = false;
  173. } else {
  174. constrainedWidth = Ext.Number.constrain(width, owner.minWidth, owner.maxWidth);
  175. if (constrainedWidth == width) {
  176. dirty = me.setWidthInDom;
  177. } else {
  178. widthModel = me.sizeModels[
  179. (constrainedWidth &lt; width) ? 'constrainedMax' : 'constrainedMin'];
  180. width = constrainedWidth;
  181. if (ownerContext.widthModel.calculatedFromShrinkWrap) {
  182. // Don't bother to invalidate since that will come soon... but we need
  183. // to signal our ownerLayout that we need an invalidate to actually
  184. // make good on the determined (constrained) size!
  185. ownerContext.widthModel = widthModel;
  186. } else {
  187. ownerContext.invalidate({ widthModel: widthModel });
  188. }
  189. }
  190. ownerContext.setWidth(width, dirty);
  191. }
  192. }
  193. });
  194. </pre>
  195. </body>
  196. </html>