docs/source/Component3.html

   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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-Component'>/**
  19 </span> * @class Ext.layout.component.Component
  20  * @extends Ext.layout.Layout
  21  * @private
  22  * &lt;p&gt;This class is intended to be extended or created via the &lt;tt&gt;&lt;b&gt;{@link Ext.Component#componentLayout layout}&lt;/b&gt;&lt;/tt&gt;
  23  * configuration property.  See &lt;tt&gt;&lt;b&gt;{@link Ext.Component#componentLayout}&lt;/b&gt;&lt;/tt&gt; for additional details.&lt;/p&gt;
  24  */
  25
  26 Ext.define('Ext.layout.component.Component', {
  27
  28     /* Begin Definitions */
  29
  30     extend: 'Ext.layout.Layout',
  31
  32     /* End Definitions */
  33
  34     type: 'component',
  35
  36     monitorChildren: true,
  37
  38     initLayout : function() {
  39         var me = this,
  40             owner = me.owner,
  41             ownerEl = owner.el;
  42
  43         if (!me.initialized) {
  44             if (owner.frameSize) {
  45                 me.frameSize = owner.frameSize;
  46             }
  47             else {
  48                 owner.frameSize = me.frameSize = {
  49                     top: 0,
  50                     left: 0,
  51                     bottom: 0,
  52                     right: 0
  53                 };
  54             }
  55         }
  56         me.callParent(arguments);
  57     },
  58
  59     beforeLayout : function(width, height, isSetSize, callingContainer) {
  60         this.callParent(arguments);
  61
  62         var me = this,
  63             owner = me.owner,
  64             ownerCt = owner.ownerCt,
  65             layout = owner.layout,
  66             isVisible = owner.isVisible(true),
  67             ownerElChild = owner.el.child,
  68             layoutCollection;
  69
  70         // Cache the size we began with so we can see if there has been any effect.
  71         me.previousComponentSize = me.lastComponentSize;
  72
  73         //Do not allow autoing of any dimensions which are fixed, unless we are being told to do so by the ownerCt's layout.
  74         if (!isSetSize &amp;&amp; ((!Ext.isNumber(width) &amp;&amp; owner.isFixedWidth()) || (!Ext.isNumber(height) &amp;&amp; owner.isFixedHeight())) &amp;&amp; callingContainer !== ownerCt) {
  75             me.doContainerLayout();
  76             return false;
  77         }
  78
  79         // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
  80         // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown.
  81         if (!isVisible &amp;&amp; (owner.hiddenAncestor || owner.floating)) {
  82             if (owner.hiddenAncestor) {
  83                 layoutCollection = owner.hiddenAncestor.layoutOnShow;
  84                 layoutCollection.remove(owner);
  85                 layoutCollection.add(owner);
  86             }
  87             owner.needsLayout = {
  88                 width: width,
  89                 height: height,
  90                 isSetSize: false
  91             };
  92         }
  93
  94         if (isVisible &amp;&amp; this.needsLayout(width, height)) {
  95             return owner.beforeComponentLayout(width, height, isSetSize, callingContainer);
  96         }
  97         else {
  98             return false;
  99         }
 100     },
 101
 102 <span id='Ext-layout-component-Component-method-needsLayout'>    /**
 103 </span>    * Check if the new size is different from the current size and only
 104     * trigger a layout if it is necessary.
 105     * @param {Mixed} width The new width to set.
 106     * @param {Mixed} height The new height to set.
 107     */
 108     needsLayout : function(width, height) {
 109         var me = this,
 110             widthBeingChanged,
 111             heightBeingChanged;
 112             me.lastComponentSize = me.lastComponentSize || {
 113                 width: -Infinity,
 114                 height: -Infinity
 115             };
 116
 117         // If autoWidthing, or an explicitly different width is passed, then the width is being changed.
 118         widthBeingChanged  = !Ext.isDefined(width)  || me.lastComponentSize.width  !== width;
 119
 120         // If autoHeighting, or an explicitly different height is passed, then the height is being changed.
 121         heightBeingChanged = !Ext.isDefined(height) || me.lastComponentSize.height !== height;
 122
 123
 124         // isSizing flag added to prevent redundant layouts when going up the layout chain
 125         return !me.isSizing &amp;&amp; (me.childrenChanged || widthBeingChanged || heightBeingChanged);
 126     },
 127
 128 <span id='Ext-layout-component-Component-method-setElementSize'>    /**
 129 </span>    * Set the size of any element supporting undefined, null, and values.
 130     * @param {Mixed} width The new width to set.
 131     * @param {Mixed} height The new height to set.
 132     */
 133     setElementSize: function(el, width, height) {
 134         if (width !== undefined &amp;&amp; height !== undefined) {
 135             el.setSize(width, height);
 136         }
 137         else if (height !== undefined) {
 138             el.setHeight(height);
 139         }
 140         else if (width !== undefined) {
 141             el.setWidth(width);
 142         }
 143     },
 144
 145 <span id='Ext-layout-component-Component-method-getTarget'>    /**
 146 </span>     * Returns the owner component's resize element.
 147      * @return {Ext.core.Element}
 148      */
 149      getTarget : function() {
 150          return this.owner.el;
 151      },
 152
 153 <span id='Ext-layout-component-Component-method-getRenderTarget'>    /**
 154 </span>     * &lt;p&gt;Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.&lt;/p&gt;
 155      * May be overridden in Component layout managers which implement an inner element.
 156      * @return {Ext.core.Element}
 157      */
 158     getRenderTarget : function() {
 159         return this.owner.el;
 160     },
 161
 162 <span id='Ext-layout-component-Component-method-setTargetSize'>    /**
 163 </span>    * Set the size of the target element.
 164     * @param {Mixed} width The new width to set.
 165     * @param {Mixed} height The new height to set.
 166     */
 167     setTargetSize : function(width, height) {
 168         var me = this;
 169         me.setElementSize(me.owner.el, width, height);
 170
 171         if (me.owner.frameBody) {
 172             var targetInfo = me.getTargetInfo(),
 173                 padding = targetInfo.padding,
 174                 border = targetInfo.border,
 175                 frameSize = me.frameSize;
 176
 177             me.setElementSize(me.owner.frameBody,
 178                 Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
 179                 Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
 180             );
 181         }
 182
 183         me.autoSized = {
 184             width: !Ext.isNumber(width),
 185             height: !Ext.isNumber(height)
 186         };
 187
 188         me.lastComponentSize = {
 189             width: width,
 190             height: height
 191         };
 192     },
 193
 194     getTargetInfo : function() {
 195         if (!this.targetInfo) {
 196             var target = this.getTarget(),
 197                 body = this.owner.getTargetEl();
 198
 199             this.targetInfo = {
 200                 padding: {
 201                     top: target.getPadding('t'),
 202                     right: target.getPadding('r'),
 203                     bottom: target.getPadding('b'),
 204                     left: target.getPadding('l')
 205                 },
 206                 border: {
 207                     top: target.getBorderWidth('t'),
 208                     right: target.getBorderWidth('r'),
 209                     bottom: target.getBorderWidth('b'),
 210                     left: target.getBorderWidth('l')
 211                 },
 212                 bodyMargin: {
 213                     top: body.getMargin('t'),
 214                     right: body.getMargin('r'),
 215                     bottom: body.getMargin('b'),
 216                     left: body.getMargin('l')
 217                 }
 218             };
 219         }
 220         return this.targetInfo;
 221     },
 222
 223     // Start laying out UP the ownerCt's layout when flagged to do so.
 224     doOwnerCtLayouts: function() {
 225         var owner = this.owner,
 226             ownerCt = owner.ownerCt,
 227             ownerCtComponentLayout, ownerCtContainerLayout,
 228             curSize = this.lastComponentSize,
 229             prevSize = this.previousComponentSize,
 230             widthChange  = (prevSize &amp;&amp; curSize &amp;&amp; curSize.width) ? curSize.width !== prevSize.width : true,
 231             heightChange = (prevSize &amp;&amp; curSize &amp;&amp; curSize.height) ? curSize.height !== prevSize.height : true;
 232
 233
 234         // If size has not changed, do not inform upstream layouts
 235         if (!ownerCt || (!widthChange &amp;&amp; !heightChange)) {
 236             return;
 237         }
 238
 239         ownerCtComponentLayout = ownerCt.componentLayout;
 240         ownerCtContainerLayout = ownerCt.layout;
 241
 242         if (!owner.floating &amp;&amp; ownerCtComponentLayout &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
 243             if (!ownerCt.suspendLayout &amp;&amp; ownerCtContainerLayout &amp;&amp; !ownerCtContainerLayout.layoutBusy) {
 244
 245                 // If the owning Container may be adjusted in any of the the dimension which have changed, perform its Component layout
 246                 if (((widthChange &amp;&amp; !ownerCt.isFixedWidth()) || (heightChange &amp;&amp; !ownerCt.isFixedHeight()))) {
 247                     // Set the isSizing flag so that the upstream Container layout (called after a Component layout) can omit this component from sizing operations
 248                     this.isSizing = true;
 249                     ownerCt.doComponentLayout();
 250                     this.isSizing = false;
 251                 }
 252                 // Execute upstream Container layout
 253                 else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
 254                     ownerCtContainerLayout.layout();
 255                 }
 256             }
 257         }
 258     },
 259
 260     doContainerLayout: function() {
 261         var me = this,
 262             owner = me.owner,
 263             ownerCt = owner.ownerCt,
 264             layout = owner.layout,
 265             ownerCtComponentLayout;
 266
 267         // Run the container layout if it exists (layout for child items)
 268         // **Unless automatic laying out is suspended, or the layout is currently running**
 269         if (!owner.suspendLayout &amp;&amp; layout &amp;&amp; layout.isLayout &amp;&amp; !layout.layoutBusy &amp;&amp; !layout.isAutoDock) {
 270             layout.layout();
 271         }
 272
 273         // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache.
 274         if (ownerCt &amp;&amp; ownerCt.componentLayout) {
 275             ownerCtComponentLayout = ownerCt.componentLayout;
 276             if (!owner.floating &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
 277                 ownerCtComponentLayout.childrenChanged = true;
 278             }
 279         }
 280     },
 281
 282     afterLayout : function(width, height, isSetSize, layoutOwner) {
 283         this.doContainerLayout();
 284         this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
 285     }
 286 });
 287 </pre>
 288 </body>
 289 </html>