Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Layout.html
index 6d4e2c8..04c6ebd 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>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-layout-Layout'>/**
-</span> * @class Ext.layout.Layout
- * @extends Object
- * @private
- * Base Layout class - extended by ComponentLayout and ContainerLayout
+</span> * Base Layout class - extended by ComponentLayout and ContainerLayout
  */
-
 Ext.define('Ext.layout.Layout', {
 
     /* Begin Definitions */
@@ -37,12 +33,12 @@ Ext.define('Ext.layout.Layout', {
             if (layout instanceof Ext.layout.Layout) {
                 return Ext.createByAlias('layout.' + layout);
             } else {
-                if (Ext.isObject(layout)) {
-                    type = layout.type;
+                if (!layout || typeof layout === 'string') {
+                    type = layout || defaultType;
+                    layout = {};                    
                 }
                 else {
-                    type = layout || defaultType;
-                    layout = {};
+                    type = layout.type || defaultType;
                 }
                 return Ext.createByAlias('layout.' + type, layout || {});
             }
@@ -78,27 +74,34 @@ Ext.define('Ext.layout.Layout', {
     },
 
     beforeLayout : function() {
-        this.renderItems(this.getLayoutItems(), this.getRenderTarget());
+        this.renderChildren();
         return true;
     },
 
+    renderChildren: function () {
+        this.renderItems(this.getLayoutItems(), this.getRenderTarget());
+    },
+
 <span id='Ext-layout-Layout-method-renderItems'>    /**
 </span>     * @private
      * Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,
      * also determines if the items are in the proper place dom.
      */
     renderItems : function(items, target) {
-        var ln = items.length,
+        var me = this,
+            ln = items.length,
             i = 0,
             item;
 
         for (; i &lt; ln; i++) {
             item = items[i];
             if (item &amp;&amp; !item.rendered) {
-                this.renderItem(item, target, i);
-            }
-            else if (!this.isValidParent(item, target, i)) {
-                this.moveItem(item, target, i);
+                me.renderItem(item, target, i);
+            } else if (!me.isValidParent(item, target, i)) {
+                me.moveItem(item, target, i);
+            } else {
+                // still need to configure the item, it may have moved in the container.
+                me.configureItem(item);
             }
         }
     },
@@ -119,14 +122,21 @@ Ext.define('Ext.layout.Layout', {
 </span>     * @private
      * Renders the given Component into the target Element.
      * @param {Ext.Component} item The Component to render
-     * @param {Ext.core.Element} target The target Element
+     * @param {Ext.Element} target The target Element
      * @param {Number} position The position within the target to render the item to
      */
     renderItem : function(item, target, position) {
+        var me = this;
         if (!item.rendered) {
+            if (me.itemCls) {
+                item.addCls(me.itemCls);
+            }
+            if (me.owner.itemCls) {
+                item.addCls(me.owner.itemCls);
+            }
             item.render(target, position);
-            this.configureItem(item);
-            this.childrenChanged = true;
+            me.configureItem(item);
+            me.childrenChanged = true;
         }
     },
 
@@ -152,10 +162,13 @@ Ext.define('Ext.layout.Layout', {
      * initialized flag when complete.
      */
     initLayout : function() {
-        if (!this.initialized &amp;&amp; !Ext.isEmpty(this.targetCls)) {
-            this.getTarget().addCls(this.targetCls);
+        var me = this,
+            targetCls = me.targetCls;
+            
+        if (!me.initialized &amp;&amp; !Ext.isEmpty(targetCls)) {
+            me.getTarget().addCls(targetCls);
         }
-        this.initialized = true;
+        me.initialized = true;
     },
 
     // @private Sets the layout owner
@@ -168,22 +181,12 @@ Ext.define('Ext.layout.Layout', {
         return [];
     },
 
-<span id='Ext-layout-Layout-method-configureItem'>    /**
+<span id='Ext-layout-Layout-property-configureItem'>    /**
 </span>     * @private
      * Applies itemCls
+     * Empty template method
      */
-    configureItem: function(item) {
-        var me = this,
-            el = item.el,
-            owner = me.owner;
-            
-        if (me.itemCls) {
-            el.addCls(me.itemCls);
-        }
-        if (owner.itemCls) {
-            el.addCls(owner.itemCls);
-        }
-    },
+    configureItem: Ext.emptyFn,
     
     // Placeholder empty functions for subclasses to extend
     onLayout : Ext.emptyFn,
@@ -197,30 +200,41 @@ Ext.define('Ext.layout.Layout', {
      * Removes itemCls
      */
     afterRemove : function(item) {
-        var me = this,
-            el = item.el,
-            owner = me.owner;
+        var el = item.el,
+            owner = this.owner,
+            itemCls = this.itemCls,
+            ownerCls = owner.itemCls;
             
-        if (item.rendered) {
-            if (me.itemCls) {
-                el.removeCls(me.itemCls);
+        // Clear managed dimensions flag when removed from the layout.
+        if (item.rendered &amp;&amp; !item.isDestroyed) {
+            if (itemCls) {
+                el.removeCls(itemCls);
             }
-            if (owner.itemCls) {
-                el.removeCls(owner.itemCls);
+            if (ownerCls) {
+                el.removeCls(ownerCls);
             }
         }
+
+        // These flags are set at the time a child item is added to a layout.
+        // The layout must decide if it is managing the item's width, or its height, or both.
+        // See AbstractComponent for docs on these properties.
+        delete item.layoutManagedWidth;
+        delete item.layoutManagedHeight;
     },
 
-    /*
-     * Destroys this layout. This is a template method that is empty by default, but should be implemented
+<span id='Ext-layout-Layout-method-destroy'>    /**
+</span>     * Destroys this layout. This is a template method that is empty by default, but should be implemented
      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
-     * @protected
+     * @template
      */
     destroy : function() {
-        if (!Ext.isEmpty(this.targetCls)) {
-            var target = this.getTarget();
+        var targetCls = this.targetCls,
+            target;
+        
+        if (!Ext.isEmpty(targetCls)) {
+            target = this.getTarget();
             if (target) {
-                target.removeCls(this.targetCls);
+                target.removeCls(targetCls);
             }
         }
         this.onDestroy();