Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Component3.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-component-Component'>/**
19 </span> * @class Ext.layout.component.Component
20  * @extends Ext.layout.Layout
21  * @private
22  * &lt;p&gt;This class is intended to be extended or created via the &lt;tt&gt;&lt;b&gt;{@link Ext.Component#componentLayout layout}&lt;/b&gt;&lt;/tt&gt;
23  * configuration property.  See &lt;tt&gt;&lt;b&gt;{@link Ext.Component#componentLayout}&lt;/b&gt;&lt;/tt&gt; for additional details.&lt;/p&gt;
24  */
25
26 Ext.define('Ext.layout.component.Component', {
27
28     /* Begin Definitions */
29
30     extend: 'Ext.layout.Layout',
31
32     /* End Definitions */
33
34     type: 'component',
35
36     monitorChildren: true,
37
38     initLayout : function() {
39         var me = this,
40             owner = me.owner,
41             ownerEl = owner.el;
42
43         if (!me.initialized) {
44             if (owner.frameSize) {
45                 me.frameSize = owner.frameSize;
46             }
47             else {
48                 owner.frameSize = me.frameSize = {
49                     top: 0,
50                     left: 0,
51                     bottom: 0,
52                     right: 0
53                 }; 
54             }
55         }
56         me.callParent(arguments);
57     },
58
59     beforeLayout : function(width, height, isSetSize, callingContainer) {
60         this.callParent(arguments);
61
62         var me = this,
63             owner = me.owner,
64             ownerCt = owner.ownerCt,
65             layout = owner.layout,
66             isVisible = owner.isVisible(true),
67             ownerElChild = owner.el.child,
68             layoutCollection;
69
70         // Cache the size we began with so we can see if there has been any effect.
71         me.previousComponentSize = me.lastComponentSize;
72
73         //Do not allow autoing of any dimensions which are fixed, unless we are being told to do so by the ownerCt's layout.
74         if (!isSetSize &amp;&amp; ((!Ext.isNumber(width) &amp;&amp; owner.isFixedWidth()) || (!Ext.isNumber(height) &amp;&amp; owner.isFixedHeight())) &amp;&amp; callingContainer !== ownerCt) {
75             me.doContainerLayout();
76             return false;
77         }
78
79         // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
80         // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown.
81         if (!isVisible &amp;&amp; (owner.hiddenAncestor || owner.floating)) {
82             if (owner.hiddenAncestor) {
83                 layoutCollection = owner.hiddenAncestor.layoutOnShow;
84                 layoutCollection.remove(owner);
85                 layoutCollection.add(owner);
86             }
87             owner.needsLayout = {
88                 width: width,
89                 height: height,
90                 isSetSize: false
91             };
92         }
93
94         if (isVisible &amp;&amp; this.needsLayout(width, height)) {
95             return owner.beforeComponentLayout(width, height, isSetSize, callingContainer);
96         }
97         else {
98             return false;
99         }
100     },
101
102 <span id='Ext-layout-component-Component-method-needsLayout'>    /**
103 </span>    * Check if the new size is different from the current size and only
104     * trigger a layout if it is necessary.
105     * @param {Mixed} width The new width to set.
106     * @param {Mixed} height The new height to set.
107     */
108     needsLayout : function(width, height) {
109         var me = this,
110             widthBeingChanged,
111             heightBeingChanged;
112             me.lastComponentSize = me.lastComponentSize || {
113                 width: -Infinity,
114                 height: -Infinity
115             };
116         
117         // If autoWidthing, or an explicitly different width is passed, then the width is being changed.
118         widthBeingChanged  = !Ext.isDefined(width)  || me.lastComponentSize.width  !== width;
119
120         // If autoHeighting, or an explicitly different height is passed, then the height is being changed.
121         heightBeingChanged = !Ext.isDefined(height) || me.lastComponentSize.height !== height;
122
123
124         // isSizing flag added to prevent redundant layouts when going up the layout chain
125         return !me.isSizing &amp;&amp; (me.childrenChanged || widthBeingChanged || heightBeingChanged);
126     },
127
128 <span id='Ext-layout-component-Component-method-setElementSize'>    /**
129 </span>    * Set the size of any element supporting undefined, null, and values.
130     * @param {Mixed} width The new width to set.
131     * @param {Mixed} height The new height to set.
132     */
133     setElementSize: function(el, width, height) {
134         if (width !== undefined &amp;&amp; height !== undefined) {
135             el.setSize(width, height);
136         }
137         else if (height !== undefined) {
138             el.setHeight(height);
139         }
140         else if (width !== undefined) {
141             el.setWidth(width);
142         }
143     },
144
145 <span id='Ext-layout-component-Component-method-getTarget'>    /**
146 </span>     * Returns the owner component's resize element.
147      * @return {Ext.core.Element}
148      */
149      getTarget : function() {
150          return this.owner.el;
151      },
152
153 <span id='Ext-layout-component-Component-method-getRenderTarget'>    /**
154 </span>     * &lt;p&gt;Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.&lt;/p&gt;
155      * May be overridden in Component layout managers which implement an inner element.
156      * @return {Ext.core.Element}
157      */
158     getRenderTarget : function() {
159         return this.owner.el;
160     },
161
162 <span id='Ext-layout-component-Component-method-setTargetSize'>    /**
163 </span>    * Set the size of the target element.
164     * @param {Mixed} width The new width to set.
165     * @param {Mixed} height The new height to set.
166     */
167     setTargetSize : function(width, height) {
168         var me = this;
169         me.setElementSize(me.owner.el, width, height);
170
171         if (me.owner.frameBody) {
172             var targetInfo = me.getTargetInfo(),
173                 padding = targetInfo.padding,
174                 border = targetInfo.border,
175                 frameSize = me.frameSize;
176
177             me.setElementSize(me.owner.frameBody,
178                 Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
179                 Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
180             );
181         }
182
183         me.autoSized = {
184             width: !Ext.isNumber(width),
185             height: !Ext.isNumber(height)
186         };
187
188         me.lastComponentSize = {
189             width: width,
190             height: height
191         };
192     },
193
194     getTargetInfo : function() {
195         if (!this.targetInfo) {
196             var target = this.getTarget(),
197                 body = this.owner.getTargetEl();
198
199             this.targetInfo = {
200                 padding: {
201                     top: target.getPadding('t'),
202                     right: target.getPadding('r'),
203                     bottom: target.getPadding('b'),
204                     left: target.getPadding('l')
205                 },
206                 border: {
207                     top: target.getBorderWidth('t'),
208                     right: target.getBorderWidth('r'),
209                     bottom: target.getBorderWidth('b'),
210                     left: target.getBorderWidth('l')
211                 },
212                 bodyMargin: {
213                     top: body.getMargin('t'),
214                     right: body.getMargin('r'),
215                     bottom: body.getMargin('b'),
216                     left: body.getMargin('l')
217                 } 
218             };
219         }
220         return this.targetInfo;
221     },
222
223     // Start laying out UP the ownerCt's layout when flagged to do so.
224     doOwnerCtLayouts: function() {
225         var owner = this.owner,
226             ownerCt = owner.ownerCt,
227             ownerCtComponentLayout, ownerCtContainerLayout,
228             curSize = this.lastComponentSize,
229             prevSize = this.previousComponentSize,
230             widthChange  = (prevSize &amp;&amp; curSize &amp;&amp; curSize.width) ? curSize.width !== prevSize.width : true,
231             heightChange = (prevSize &amp;&amp; curSize &amp;&amp; curSize.height) ? curSize.height !== prevSize.height : true;
232
233
234         // If size has not changed, do not inform upstream layouts
235         if (!ownerCt || (!widthChange &amp;&amp; !heightChange)) {
236             return;
237         }
238         
239         ownerCtComponentLayout = ownerCt.componentLayout;
240         ownerCtContainerLayout = ownerCt.layout;
241
242         if (!owner.floating &amp;&amp; ownerCtComponentLayout &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
243             if (!ownerCt.suspendLayout &amp;&amp; ownerCtContainerLayout &amp;&amp; !ownerCtContainerLayout.layoutBusy) {
244
245                 // If the owning Container may be adjusted in any of the the dimension which have changed, perform its Component layout
246                 if (((widthChange &amp;&amp; !ownerCt.isFixedWidth()) || (heightChange &amp;&amp; !ownerCt.isFixedHeight()))) {
247                     // Set the isSizing flag so that the upstream Container layout (called after a Component layout) can omit this component from sizing operations
248                     this.isSizing = true;
249                     ownerCt.doComponentLayout();
250                     this.isSizing = false;
251                 }
252                 // Execute upstream Container layout
253                 else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
254                     ownerCtContainerLayout.layout();
255                 }
256             }
257         }
258     },
259
260     doContainerLayout: function() {
261         var me = this,
262             owner = me.owner,
263             ownerCt = owner.ownerCt,
264             layout = owner.layout,
265             ownerCtComponentLayout;
266
267         // Run the container layout if it exists (layout for child items)
268         // **Unless automatic laying out is suspended, or the layout is currently running**
269         if (!owner.suspendLayout &amp;&amp; layout &amp;&amp; layout.isLayout &amp;&amp; !layout.layoutBusy &amp;&amp; !layout.isAutoDock) {
270             layout.layout();
271         }
272
273         // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache.
274         if (ownerCt &amp;&amp; ownerCt.componentLayout) {
275             ownerCtComponentLayout = ownerCt.componentLayout;
276             if (!owner.floating &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
277                 ownerCtComponentLayout.childrenChanged = true;
278             }
279         }
280     },
281
282     afterLayout : function(width, height, isSetSize, layoutOwner) {
283         this.doContainerLayout();
284         this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
285     }
286 });
287 </pre>
288 </body>
289 </html>