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="../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, layoutOwner) {
  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         /*
  71          * Do not layout calculatedSized components for fixedLayouts unless the ownerCt == layoutOwner
  72          * fixedLayouts means layouts which are never auto/auto in the sizing that comes from their ownerCt.
  73          * Currently 3 layouts MAY be auto/auto (Auto, Border, and Box)
  74          * The reason for not allowing component layouts is to stop component layouts from things such as Updater and
  75          * form Validation.
  76          */
  77         if (!isSetSize &amp;&amp; !(Ext.isNumber(width) &amp;&amp; Ext.isNumber(height)) &amp;&amp; ownerCt &amp;&amp; ownerCt.layout &amp;&amp; ownerCt.layout.fixedLayout &amp;&amp; ownerCt != layoutOwner) {
  78             me.doContainerLayout();
  79             return false;
  80         }
  81
  82         // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
  83         // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown.
  84         if (!isVisible &amp;&amp; (owner.hiddenAncestor || owner.floating)) {
  85             if (owner.hiddenAncestor) {
  86                 layoutCollection = owner.hiddenAncestor.layoutOnShow;
  87                 layoutCollection.remove(owner);
  88                 layoutCollection.add(owner);
  89             }
  90             owner.needsLayout = {
  91                 width: width,
  92                 height: height,
  93                 isSetSize: false
  94             };
  95         }
  96
  97         if (isVisible &amp;&amp; this.needsLayout(width, height)) {
  98             me.rawWidth = width;
  99             me.rawHeight = height;
 100             return owner.beforeComponentLayout(width, height, isSetSize, layoutOwner);
 101         }
 102         else {
 103             return false;
 104         }
 105     },
 106
 107 <span id='Ext-layout-component-Component-method-needsLayout'>    /**
 108 </span>    * Check if the new size is different from the current size and only
 109     * trigger a layout if it is necessary.
 110     * @param {Mixed} width The new width to set.
 111     * @param {Mixed} height The new height to set.
 112     */
 113     needsLayout : function(width, height) {
 114         this.lastComponentSize = this.lastComponentSize || {
 115             width: -Infinity,
 116             height: -Infinity
 117         };
 118         return (this.childrenChanged || this.lastComponentSize.width !== width || this.lastComponentSize.height !== height);
 119     },
 120
 121 <span id='Ext-layout-component-Component-method-setElementSize'>    /**
 122 </span>    * Set the size of any element supporting undefined, null, and values.
 123     * @param {Mixed} width The new width to set.
 124     * @param {Mixed} height The new height to set.
 125     */
 126     setElementSize: function(el, width, height) {
 127         if (width !== undefined &amp;&amp; height !== undefined) {
 128             el.setSize(width, height);
 129         }
 130         else if (height !== undefined) {
 131             el.setHeight(height);
 132         }
 133         else if (width !== undefined) {
 134             el.setWidth(width);
 135         }
 136     },
 137
 138 <span id='Ext-layout-component-Component-method-getTarget'>    /**
 139 </span>     * Returns the owner component's resize element.
 140      * @return {Ext.core.Element}
 141      */
 142      getTarget : function() {
 143          return this.owner.el;
 144      },
 145
 146 <span id='Ext-layout-component-Component-method-getRenderTarget'>    /**
 147 </span>     * &lt;p&gt;Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.&lt;/p&gt;
 148      * May be overridden in Component layout managers which implement an inner element.
 149      * @return {Ext.core.Element}
 150      */
 151     getRenderTarget : function() {
 152         return this.owner.el;
 153     },
 154
 155 <span id='Ext-layout-component-Component-method-setTargetSize'>    /**
 156 </span>    * Set the size of the target element.
 157     * @param {Mixed} width The new width to set.
 158     * @param {Mixed} height The new height to set.
 159     */
 160     setTargetSize : function(width, height) {
 161         var me = this;
 162         me.setElementSize(me.owner.el, width, height);
 163
 164         if (me.owner.frameBody) {
 165             var targetInfo = me.getTargetInfo(),
 166                 padding = targetInfo.padding,
 167                 border = targetInfo.border,
 168                 frameSize = me.frameSize;
 169
 170             me.setElementSize(me.owner.frameBody,
 171                 Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
 172                 Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
 173             );
 174         }
 175
 176         me.autoSized = {
 177             width: !Ext.isNumber(width),
 178             height: !Ext.isNumber(height)
 179         };
 180
 181         me.lastComponentSize = {
 182             width: width,
 183             height: height
 184         };
 185     },
 186
 187     getTargetInfo : function() {
 188         if (!this.targetInfo) {
 189             var target = this.getTarget(),
 190                 body = this.owner.getTargetEl();
 191
 192             this.targetInfo = {
 193                 padding: {
 194                     top: target.getPadding('t'),
 195                     right: target.getPadding('r'),
 196                     bottom: target.getPadding('b'),
 197                     left: target.getPadding('l')
 198                 },
 199                 border: {
 200                     top: target.getBorderWidth('t'),
 201                     right: target.getBorderWidth('r'),
 202                     bottom: target.getBorderWidth('b'),
 203                     left: target.getBorderWidth('l')
 204                 },
 205                 bodyMargin: {
 206                     top: body.getMargin('t'),
 207                     right: body.getMargin('r'),
 208                     bottom: body.getMargin('b'),
 209                     left: body.getMargin('l')
 210                 }
 211             };
 212         }
 213         return this.targetInfo;
 214     },
 215
 216     // Start laying out UP the ownerCt's layout when flagged to do so.
 217     doOwnerCtLayouts: function() {
 218         var owner = this.owner,
 219             ownerCt = owner.ownerCt,
 220             ownerCtComponentLayout, ownerCtContainerLayout;
 221
 222         if (!ownerCt) {
 223             return;
 224         }
 225
 226         ownerCtComponentLayout = ownerCt.componentLayout;
 227         ownerCtContainerLayout = ownerCt.layout;
 228
 229         if (!owner.floating &amp;&amp; ownerCtComponentLayout &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
 230             if (!ownerCt.suspendLayout &amp;&amp; ownerCtContainerLayout &amp;&amp; !ownerCtContainerLayout.layoutBusy) {
 231                 // AutoContainer Layout and Dock with auto in some dimension
 232                 if (ownerCtContainerLayout.bindToOwnerCtComponent === true) {
 233                     ownerCt.doComponentLayout();
 234                 }
 235                 // Box Layouts
 236                 else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
 237                     ownerCtContainerLayout.layout();
 238                 }
 239             }
 240         }
 241     },
 242
 243     doContainerLayout: function() {
 244         var me = this,
 245             owner = me.owner,
 246             ownerCt = owner.ownerCt,
 247             layout = owner.layout,
 248             ownerCtComponentLayout;
 249
 250         // Run the container layout if it exists (layout for child items)
 251         // **Unless automatic laying out is suspended, or the layout is currently running**
 252         if (!owner.suspendLayout &amp;&amp; layout &amp;&amp; layout.isLayout &amp;&amp; !layout.layoutBusy) {
 253             layout.layout();
 254         }
 255
 256         // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache.
 257         if (ownerCt &amp;&amp; ownerCt.componentLayout) {
 258             ownerCtComponentLayout = ownerCt.componentLayout;
 259             if (!owner.floating &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
 260                 ownerCtComponentLayout.childrenChanged = true;
 261             }
 262         }
 263     },
 264
 265     afterLayout : function(width, height, isSetSize, layoutOwner) {
 266         this.doContainerLayout();
 267         this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
 268     }
 269 });
 270 </pre>
 271 </body>
 272 </html>