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