Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / docs / source / Auto2.html
diff --git a/docs/source/Auto2.html b/docs/source/Auto2.html

index 9e75811..a6e6895 100644 (file)
--- a/docs/source/Auto2.html
+++ b/docs/source/Auto2.html
@@ -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>
@@ -15,29 +15,82 @@
    </script>
  </head>
  <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-layout-component-Auto'>/**
-</span> * @class Ext.layout.component.Auto
- * @extends Ext.layout.component.Component
- * @private
+  <pre class="prettyprint lang-js"><span id='Ext-layout-container-Auto'>/**
+</span> * @class Ext.layout.container.Auto
+ * @extends Ext.layout.container.Container
   *
- * &lt;p&gt;The AutoLayout is the default layout manager delegated by {@link Ext.Component} to
- * render any child Elements when no &lt;tt&gt;{@link Ext.Component#layout layout}&lt;/tt&gt; is configured.&lt;/p&gt;
+ * The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
+ * render any child Components when no `{@link Ext.container.Container#layout layout}` is configured into
+ * a `{@link Ext.container.Container Container}.` AutoLayout provides only a passthrough of any layout calls
+ * to any child containers.
+ *
+ *     @example
+ *     Ext.create('Ext.Panel', {
+ *         width: 500,
+ *         height: 280,
+ *         title: &quot;AutoLayout Panel&quot;,
+ *         layout: 'auto',
+ *         renderTo: document.body,
+ *         items: [{
+ *             xtype: 'panel',
+ *             title: 'Top Inner Panel',
+ *             width: '75%',
+ *             height: 90
+ *         },
+ *         {
+ *             xtype: 'panel',
+ *             title: 'Bottom Inner Panel',
+ *             width: '75%',
+ *             height: 90
+ *         }]
+ *     });
   */
-
-Ext.define('Ext.layout.component.Auto', {
+Ext.define('Ext.layout.container.Auto', {
  
      /* Begin Definitions */
  
-    alias: 'layout.autocomponent',
+    alias: ['layout.auto', 'layout.autocontainer'],
  
-    extend: 'Ext.layout.component.Component',
+    extend: 'Ext.layout.container.Container',
  
      /* End Definitions */
  
-    type: 'autocomponent',
+    type: 'autocontainer',
+
+    bindToOwnerCtComponent: true,
+
+    // @private
+    onLayout : function(owner, target) {
+        var me = this,
+            items = me.getLayoutItems(),
+            ln = items.length,
+            i;
+
+        // Ensure the Container is only primed with the clear element if there are child items.
+        if (ln) {
+            // Auto layout uses natural HTML flow to arrange the child items.
+            // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
+            // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
+            if (!me.clearEl) {
+                me.clearEl = me.getRenderTarget().createChild({
+                    cls: Ext.baseCSSPrefix + 'clear',
+                    role: 'presentation'
+                });
+            }
+
+            // Auto layout allows CSS to size its child items.
+            for (i = 0; i &lt; ln; i++) {
+                me.setItemSize(items[i]);
+            }
+        }
+    },
+
+    configureItem: function(item) {
+        this.callParent(arguments);
  
-    onLayout : function(width, height) {
-        this.setTargetSize(width, height);
+        // Auto layout does not manage any dimensions.
+        item.layoutManagedHeight = 2;
+        item.layoutManagedWidth = 2;
      }
  });</pre>
  </body>