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