Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / AbstractDock.html
index e7e7bb7..725ec56 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
@@ -38,7 +38,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
 <span id='Ext-layout-component-AbstractDock-property-autoSizing'>    /**
 </span>     * @private
      * @property autoSizing
-     * @type boolean
+     * @type Boolean
      * This flag is set to indicate this layout may have an autoHeight/autoWidth.
      */
     autoSizing: true,
@@ -140,10 +140,14 @@ Ext.define('Ext.layout.component.AbstractDock', {
 <span id='Ext-layout-component-AbstractDock-method-onLayout'>    /**
 </span>     * @protected
      * @param {Ext.Component} owner The Panel that owns this DockLayout
-     * @param {Ext.core.Element} target The target in which we are going to render the docked items
+     * @param {Ext.Element} target The target in which we are going to render the docked items
      * @param {Array} args The arguments passed to the ComponentLayout.layout method
      */
     onLayout: function(width, height) {
+        if (this.onLayout_running) {
+            return;
+        }
+        this.onLayout_running = true;
         var me = this,
             owner = me.owner,
             body = owner.body,
@@ -178,20 +182,20 @@ Ext.define('Ext.layout.component.AbstractDock', {
         }
 
         // Determine if we have an autoHeight or autoWidth.
-        if (height === undefined || height === null || width === undefined || width === null) {
+        if (height == null || width == null) {
             padding = info.padding;
             border = info.border;
             frameSize = me.frameSize;
 
             // Auto-everything, clear out any style height/width and read from css
-            if ((height === undefined || height === null) &amp;&amp; (width === undefined || width === null)) {
+            if ((height == null) &amp;&amp; (width == null)) {
                 autoHeight = true;
                 autoWidth = true;
                 me.setTargetSize(null);
                 me.setBodyBox({width: null, height: null});
             }
             // Auto-height
-            else if (height === undefined || height === null) {
+            else if (height == null) {
                 autoHeight = true;
                 // Clear any sizing that we already set in a previous layout
                 me.setTargetSize(width);
@@ -226,6 +230,8 @@ Ext.define('Ext.layout.component.AbstractDock', {
                 // to fit the dock items in.  This is valid because the target container is
                 // suppose to be autosized to fit everything accordingly.
                 info.autoSizedCtLayout = layout.autoSize === true;
+                info.autoHeight = autoHeight;
+                info.autoWidth = autoWidth;
             }
 
             // The dockItems method will add all the top and bottom docked items height
@@ -233,7 +239,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
             // we dock all the items to actually set the panel's width and height.
             // We have to do this because the panel body and docked items will be position
             // absolute which doesn't stretch the panel.
-            me.dockItems(autoWidth, autoHeight);
+            me.dockItems();
             me.setTargetSize(info.size.width, info.size.height);
         }
         else {
@@ -241,6 +247,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
             me.dockItems();
         }
         me.callParent(arguments);
+        this.onLayout_running = false;
     },
 
 <span id='Ext-layout-component-AbstractDock-method-dockItems'>    /**
@@ -252,25 +259,28 @@ Ext.define('Ext.layout.component.AbstractDock', {
      * @param {Boolean} autoBoxes Set this to true if the Panel is part of an
      * AutoContainerLayout
      */
-    dockItems : function(autoWidth, autoHeight) {
-        this.calculateDockBoxes(autoWidth, autoHeight);
+    dockItems : function() {
+        this.calculateDockBoxes();
 
         // Both calculateAutoBoxes and calculateSizedBoxes are changing the
         // information about the body, panel size, and boxes for docked items
         // inside a property called info.
         var info = this.info,
+            autoWidth = info.autoWidth,
+            autoHeight = info.autoHeight,
             boxes = info.boxes,
             ln = boxes.length,
-            dock, i;
+            dock, i, item;
 
         // We are going to loop over all the boxes that were calculated
         // and set the position of each item the box belongs to.
         for (i = 0; i &lt; ln; i++) {
             dock = boxes[i];
-            dock.item.setPosition(dock.x, dock.y);
-            if ((autoWidth || autoHeight) &amp;&amp; dock.layout &amp;&amp; dock.layout.isLayout) {
+            item = dock.item;
+            item.setPosition(dock.x, dock.y);
+            if ((autoWidth || autoHeight) &amp;&amp; item.layout &amp;&amp; item.layout.isLayout) {
                 // Auto-Sized so have the container layout notify the component layout.
-                dock.layout.bindToOwnerCtComponent = true;
+                item.layout.bindToOwnerCtComponent = true;
             }
         }
 
@@ -297,7 +307,12 @@ Ext.define('Ext.layout.component.AbstractDock', {
      * dock position and all calculations involved with adjusting the body box.
      * @param {Array} items Array containing all the docked items we have to layout
      */
-    calculateDockBoxes : function(autoWidth, autoHeight) {
+    calculateDockBoxes : function() {
+        if (this.calculateDockBoxes_running) {
+            // [AbstractDock#calculateDockBoxes] attempted to run again while it was already running
+            return;
+        }
+        this.calculateDockBoxes_running = true;
         // We want to use the Panel's el width, and the Panel's body height as the initial
         // size we are going to use in calculateDockBoxes. We also want to account for
         // the border of the panel.
@@ -307,6 +322,8 @@ Ext.define('Ext.layout.component.AbstractDock', {
             owner = me.owner,
             bodyEl = owner.body,
             info = me.info,
+            autoWidth = info.autoWidth,
+            autoHeight = info.autoHeight,
             size = info.size,
             ln = items.length,
             padding = info.padding,
@@ -356,6 +373,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
             // all the docked items that have changed.
             info.boxes.push(box);
         }
+        this.calculateDockBoxes_running = false;
     },
 
 <span id='Ext-layout-component-AbstractDock-method-adjustSizedBox'>    /**
@@ -475,20 +493,20 @@ Ext.define('Ext.layout.component.AbstractDock', {
                 box.y = bodyBox.y;
                 if (!box.overlay) {
                     bodyBox.y += box.height;
-                    if (owner.isFixedHeight()) {
-                        bodyBox.height -= box.height;
-                    } else {
+                    if (info.autoHeight) {
                         size.height += box.height;
+                    } else {
+                        bodyBox.height -= box.height;
                     }
                 }
                 break;
 
             case 'bottom':
                 if (!box.overlay) {
-                    if (owner.isFixedHeight()) {
-                        bodyBox.height -= box.height;
-                    } else {
+                    if (info.autoHeight) {
                         size.height += box.height;
+                    } else {
+                        bodyBox.height -= box.height;
                     }
                 }
                 box.y = (bodyBox.y + bodyBox.height);
@@ -498,20 +516,20 @@ Ext.define('Ext.layout.component.AbstractDock', {
                 box.x = bodyBox.x;
                 if (!box.overlay) {
                     bodyBox.x += box.width;
-                    if (owner.isFixedWidth()) {
-                        bodyBox.width -= box.width;
-                    } else {
+                    if (info.autoWidth) {
                         size.width += box.width;
+                    } else {
+                        bodyBox.width -= box.width;
                     }
                 }
                 break;
 
             case 'right':
                 if (!box.overlay) {
-                    if (owner.isFixedWidth()) {
-                        bodyBox.width -= box.width;
-                    } else {
+                    if (info.autoWidth) {
                         size.width += box.width;
+                    } else {
+                        bodyBox.width -= box.width;
                     }
                 }
                 box.x = (bodyBox.x + bodyBox.width);
@@ -556,7 +574,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
                 item: item,
                 overlay: item.overlay,
                 type: item.dock,
-                offsets: Ext.core.Element.parseBox(item.offsets || {}),
+                offsets: Ext.Element.parseBox(item.offsets || {}),
                 ignoreFrame: item.ignoreParentFrame
             };
         // First we are going to take care of stretch and align properties for all four dock scenarios.
@@ -598,10 +616,10 @@ Ext.define('Ext.layout.component.AbstractDock', {
 
         // If we haven't calculated the width or height of the docked item yet
         // do so, since we need this for our upcoming calculations
-        if (box.width == undefined) {
+        if (box.width === undefined) {
             box.width = item.getWidth() + item.el.getMargin('lr');
         }
-        if (box.height == undefined) {
+        if (box.height === undefined) {
             box.height = item.getHeight() + item.el.getMargin('tb');
         }
 
@@ -645,7 +663,7 @@ Ext.define('Ext.layout.component.AbstractDock', {
             cn = Ext.get(cns[i]);
             for (j = 0; j &lt; ln; j++) {
                 item = items[j];
-                if (item.rendered &amp;&amp; (cn.id == item.el.id || cn.down('#' + item.el.id))) {
+                if (item.rendered &amp;&amp; (cn.id == item.el.id || cn.contains(item.el.id))) {
                     break;
                 }
             }