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