Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Auto2.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-container-Auto'>/**
19 </span> * @class Ext.layout.container.Auto
20  * @extends Ext.layout.container.Container
21  *
22  * The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
23  * render any child Components when no `{@link Ext.container.Container#layout layout}` is configured into
24  * a `{@link Ext.container.Container Container}.` AutoLayout provides only a passthrough of any layout calls
25  * to any child containers.
26  *
27  *     @example
28  *     Ext.create('Ext.Panel', {
29  *         width: 500,
30  *         height: 280,
31  *         title: &quot;AutoLayout Panel&quot;,
32  *         layout: 'auto',
33  *         renderTo: document.body,
34  *         items: [{
35  *             xtype: 'panel',
36  *             title: 'Top Inner Panel',
37  *             width: '75%',
38  *             height: 90
39  *         },
40  *         {
41  *             xtype: 'panel',
42  *             title: 'Bottom Inner Panel',
43  *             width: '75%',
44  *             height: 90
45  *         }]
46  *     });
47  */
48 Ext.define('Ext.layout.container.Auto', {
49
50     /* Begin Definitions */
51
52     alias: ['layout.auto', 'layout.autocontainer'],
53
54     extend: 'Ext.layout.container.Container',
55
56     /* End Definitions */
57
58     type: 'autocontainer',
59
60     bindToOwnerCtComponent: true,
61
62     // @private
63     onLayout : function(owner, target) {
64         var me = this,
65             items = me.getLayoutItems(),
66             ln = items.length,
67             i;
68
69         // Ensure the Container is only primed with the clear element if there are child items.
70         if (ln) {
71             // Auto layout uses natural HTML flow to arrange the child items.
72             // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
73             // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
74             if (!me.clearEl) {
75                 me.clearEl = me.getRenderTarget().createChild({
76                     cls: Ext.baseCSSPrefix + 'clear',
77                     role: 'presentation'
78                 });
79             }
80
81             // Auto layout allows CSS to size its child items.
82             for (i = 0; i &lt; ln; i++) {
83                 me.setItemSize(items[i]);
84             }
85         }
86     },
87
88     configureItem: function(item) {
89         this.callParent(arguments);
90
91         // Auto layout does not manage any dimensions.
92         item.layoutManagedHeight = 2;
93         item.layoutManagedWidth = 2;
94     }
95 });</pre>
96 </body>
97 </html>