Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Layout.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-Layout'>/**
19 </span> * @class Ext.layout.Layout
20  * @extends Object
21  * Base Layout class - extended by ComponentLayout and ContainerLayout
22  */
23 Ext.define('Ext.layout.Layout', {
24
25     /* Begin Definitions */
26
27     /* End Definitions */
28
29     isLayout: true,
30     initialized: false,
31
32     statics: {
33         create: function(layout, defaultType) {
34             var type;
35             if (layout instanceof Ext.layout.Layout) {
36                 return Ext.createByAlias('layout.' + layout);
37             } else {
38                 if (!layout || typeof layout === 'string') {
39                     type = layout || defaultType;
40                     layout = {};                    
41                 }
42                 else {
43                     type = layout.type;
44                 }
45                 return Ext.createByAlias('layout.' + type, layout || {});
46             }
47         }
48     },
49
50     constructor : function(config) {
51         this.id = Ext.id(null, this.type + '-');
52         Ext.apply(this, config);
53     },
54
55 <span id='Ext-layout-Layout-method-layout'>    /**
56 </span>     * @private
57      */
58     layout : function() {
59         var me = this;
60         me.layoutBusy = true;
61         me.initLayout();
62
63         if (me.beforeLayout.apply(me, arguments) !== false) {
64             me.layoutCancelled = false;
65             me.onLayout.apply(me, arguments);
66             me.childrenChanged = false;
67             me.owner.needsLayout = false;
68             me.layoutBusy = false;
69             me.afterLayout.apply(me, arguments);
70         }
71         else {
72             me.layoutCancelled = true;
73         }
74         me.layoutBusy = false;
75         me.doOwnerCtLayouts();
76     },
77
78     beforeLayout : function() {
79         this.renderItems(this.getLayoutItems(), this.getRenderTarget());
80         return true;
81     },
82
83 <span id='Ext-layout-Layout-method-renderItems'>    /**
84 </span>     * @private
85      * Iterates over all passed items, ensuring they are rendered.  If the items are already rendered,
86      * also determines if the items are in the proper place dom.
87      */
88     renderItems : function(items, target) {
89         var ln = items.length,
90             i = 0,
91             item;
92
93         for (; i &lt; ln; i++) {
94             item = items[i];
95             if (item &amp;&amp; !item.rendered) {
96                 this.renderItem(item, target, i);
97             }
98             else if (!this.isValidParent(item, target, i)) {
99                 this.moveItem(item, target, i);
100             }
101         }
102     },
103
104     // @private - Validates item is in the proper place in the dom.
105     isValidParent : function(item, target, position) {
106         var dom = item.el ? item.el.dom : Ext.getDom(item);
107         if (dom &amp;&amp; target &amp;&amp; target.dom) {
108             if (Ext.isNumber(position) &amp;&amp; dom !== target.dom.childNodes[position]) {
109                 return false;
110             }
111             return (dom.parentNode == (target.dom || target));
112         }
113         return false;
114     },
115
116 <span id='Ext-layout-Layout-method-renderItem'>    /**
117 </span>     * @private
118      * Renders the given Component into the target Element.
119      * @param {Ext.Component} item The Component to render
120      * @param {Ext.core.Element} target The target Element
121      * @param {Number} position The position within the target to render the item to
122      */
123     renderItem : function(item, target, position) {
124         var me = this;
125         if (!item.rendered) {
126             if (me.itemCls) {
127                 item.addCls(me.itemCls);
128             }
129             if (me.owner.itemCls) {
130                 item.addCls(me.owner.itemCls);
131             }
132             item.render(target, position);
133             me.configureItem(item);
134             me.childrenChanged = true;
135         }
136     },
137
138 <span id='Ext-layout-Layout-method-moveItem'>    /**
139 </span>     * @private
140      * Moved Component to the provided target instead.
141      */
142     moveItem : function(item, target, position) {
143         // Make sure target is a dom element
144         target = target.dom || target;
145         if (typeof position == 'number') {
146             position = target.childNodes[position];
147         }
148         target.insertBefore(item.el.dom, position || null);
149         item.container = Ext.get(target);
150         this.configureItem(item);
151         this.childrenChanged = true;
152     },
153
154 <span id='Ext-layout-Layout-method-initLayout'>    /**
155 </span>     * @private
156      * Adds the layout's targetCls if necessary and sets
157      * initialized flag when complete.
158      */
159     initLayout : function() {
160         if (!this.initialized &amp;&amp; !Ext.isEmpty(this.targetCls)) {
161             this.getTarget().addCls(this.targetCls);
162         }
163         this.initialized = true;
164     },
165
166     // @private Sets the layout owner
167     setOwner : function(owner) {
168         this.owner = owner;
169     },
170
171     // @private - Returns empty array
172     getLayoutItems : function() {
173         return [];
174     },
175
176 <span id='Ext-layout-Layout-property-configureItem'>    /**
177 </span>     * @private
178      * Applies itemCls
179      * Empty template method
180      */
181     configureItem: Ext.emptyFn,
182     
183     // Placeholder empty functions for subclasses to extend
184     onLayout : Ext.emptyFn,
185     afterLayout : Ext.emptyFn,
186     onRemove : Ext.emptyFn,
187     onDestroy : Ext.emptyFn,
188     doOwnerCtLayouts : Ext.emptyFn,
189
190 <span id='Ext-layout-Layout-method-afterRemove'>    /**
191 </span>     * @private
192      * Removes itemCls
193      */
194     afterRemove : function(item) {
195         var me = this,
196             el = item.el,
197             owner = me.owner;
198             
199         // Clear managed dimensions flag when removed from the layout.
200         if (item.rendered) {
201             if (me.itemCls) {
202                 el.removeCls(me.itemCls);
203             }
204             if (owner.itemCls) {
205                 el.removeCls(owner.itemCls);
206             }
207         }
208
209         // These flags are set at the time a child item is added to a layout.
210         // The layout must decide if it is managing the item's width, or its height, or both.
211         // See AbstractComponent for docs on these properties.
212         delete item.layoutManagedWidth;
213         delete item.layoutManagedHeight;
214     },
215
216     /*
217      * Destroys this layout. This is a template method that is empty by default, but should be implemented
218      * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
219      * @protected
220      */
221     destroy : function() {
222         if (!Ext.isEmpty(this.targetCls)) {
223             var target = this.getTarget();
224             if (target) {
225                 target.removeCls(this.targetCls);
226             }
227         }
228         this.onDestroy();
229     }
230 });</pre>
231 </body>
232 </html>