Upgrade to ExtJS 4.0.1 - Released 05/18/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="../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, layoutOwner) {
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         /*
71          * Do not layout calculatedSized components for fixedLayouts unless the ownerCt == layoutOwner
72          * fixedLayouts means layouts which are never auto/auto in the sizing that comes from their ownerCt.
73          * Currently 3 layouts MAY be auto/auto (Auto, Border, and Box)
74          * The reason for not allowing component layouts is to stop component layouts from things such as Updater and
75          * form Validation.
76          */
77         if (!isSetSize &amp;&amp; !(Ext.isNumber(width) &amp;&amp; Ext.isNumber(height)) &amp;&amp; ownerCt &amp;&amp; ownerCt.layout &amp;&amp; ownerCt.layout.fixedLayout &amp;&amp; ownerCt != layoutOwner) {
78             me.doContainerLayout();
79             return false;
80         }
81
82         // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
83         // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown.
84         if (!isVisible &amp;&amp; (owner.hiddenAncestor || owner.floating)) {
85             if (owner.hiddenAncestor) {
86                 layoutCollection = owner.hiddenAncestor.layoutOnShow;
87                 layoutCollection.remove(owner);
88                 layoutCollection.add(owner);
89             }
90             owner.needsLayout = {
91                 width: width,
92                 height: height,
93                 isSetSize: false
94             };
95         }
96
97         if (isVisible &amp;&amp; this.needsLayout(width, height)) {
98             me.rawWidth = width;
99             me.rawHeight = height;
100             return owner.beforeComponentLayout(width, height, isSetSize, layoutOwner);
101         }
102         else {
103             return false;
104         }
105     },
106
107 <span id='Ext-layout-component-Component-method-needsLayout'>    /**
108 </span>    * Check if the new size is different from the current size and only
109     * trigger a layout if it is necessary.
110     * @param {Mixed} width The new width to set.
111     * @param {Mixed} height The new height to set.
112     */
113     needsLayout : function(width, height) {
114         this.lastComponentSize = this.lastComponentSize || {
115             width: -Infinity,
116             height: -Infinity
117         };
118         return (this.childrenChanged || this.lastComponentSize.width !== width || this.lastComponentSize.height !== height);
119     },
120
121 <span id='Ext-layout-component-Component-method-setElementSize'>    /**
122 </span>    * Set the size of any element supporting undefined, null, and values.
123     * @param {Mixed} width The new width to set.
124     * @param {Mixed} height The new height to set.
125     */
126     setElementSize: function(el, width, height) {
127         if (width !== undefined &amp;&amp; height !== undefined) {
128             el.setSize(width, height);
129         }
130         else if (height !== undefined) {
131             el.setHeight(height);
132         }
133         else if (width !== undefined) {
134             el.setWidth(width);
135         }
136     },
137
138 <span id='Ext-layout-component-Component-method-getTarget'>    /**
139 </span>     * Returns the owner component's resize element.
140      * @return {Ext.core.Element}
141      */
142      getTarget : function() {
143          return this.owner.el;
144      },
145
146 <span id='Ext-layout-component-Component-method-getRenderTarget'>    /**
147 </span>     * &lt;p&gt;Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.&lt;/p&gt;
148      * May be overridden in Component layout managers which implement an inner element.
149      * @return {Ext.core.Element}
150      */
151     getRenderTarget : function() {
152         return this.owner.el;
153     },
154
155 <span id='Ext-layout-component-Component-method-setTargetSize'>    /**
156 </span>    * Set the size of the target element.
157     * @param {Mixed} width The new width to set.
158     * @param {Mixed} height The new height to set.
159     */
160     setTargetSize : function(width, height) {
161         var me = this;
162         me.setElementSize(me.owner.el, width, height);
163
164         if (me.owner.frameBody) {
165             var targetInfo = me.getTargetInfo(),
166                 padding = targetInfo.padding,
167                 border = targetInfo.border,
168                 frameSize = me.frameSize;
169
170             me.setElementSize(me.owner.frameBody,
171                 Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width,
172                 Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height
173             );
174         }
175
176         me.autoSized = {
177             width: !Ext.isNumber(width),
178             height: !Ext.isNumber(height)
179         };
180
181         me.lastComponentSize = {
182             width: width,
183             height: height
184         };
185     },
186
187     getTargetInfo : function() {
188         if (!this.targetInfo) {
189             var target = this.getTarget(),
190                 body = this.owner.getTargetEl();
191
192             this.targetInfo = {
193                 padding: {
194                     top: target.getPadding('t'),
195                     right: target.getPadding('r'),
196                     bottom: target.getPadding('b'),
197                     left: target.getPadding('l')
198                 },
199                 border: {
200                     top: target.getBorderWidth('t'),
201                     right: target.getBorderWidth('r'),
202                     bottom: target.getBorderWidth('b'),
203                     left: target.getBorderWidth('l')
204                 },
205                 bodyMargin: {
206                     top: body.getMargin('t'),
207                     right: body.getMargin('r'),
208                     bottom: body.getMargin('b'),
209                     left: body.getMargin('l')
210                 } 
211             };
212         }
213         return this.targetInfo;
214     },
215
216     // Start laying out UP the ownerCt's layout when flagged to do so.
217     doOwnerCtLayouts: function() {
218         var owner = this.owner,
219             ownerCt = owner.ownerCt,
220             ownerCtComponentLayout, ownerCtContainerLayout;
221
222         if (!ownerCt) {
223             return;
224         }
225
226         ownerCtComponentLayout = ownerCt.componentLayout;
227         ownerCtContainerLayout = ownerCt.layout;
228
229         if (!owner.floating &amp;&amp; ownerCtComponentLayout &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
230             if (!ownerCt.suspendLayout &amp;&amp; ownerCtContainerLayout &amp;&amp; !ownerCtContainerLayout.layoutBusy) {
231                 // AutoContainer Layout and Dock with auto in some dimension
232                 if (ownerCtContainerLayout.bindToOwnerCtComponent === true) {
233                     ownerCt.doComponentLayout();
234                 }
235                 // Box Layouts
236                 else if (ownerCtContainerLayout.bindToOwnerCtContainer === true) {
237                     ownerCtContainerLayout.layout();
238                 }
239             }
240         }
241     },
242
243     doContainerLayout: function() {
244         var me = this,
245             owner = me.owner,
246             ownerCt = owner.ownerCt,
247             layout = owner.layout,
248             ownerCtComponentLayout;
249
250         // Run the container layout if it exists (layout for child items)
251         // **Unless automatic laying out is suspended, or the layout is currently running**
252         if (!owner.suspendLayout &amp;&amp; layout &amp;&amp; layout.isLayout &amp;&amp; !layout.layoutBusy) {
253             layout.layout();
254         }
255
256         // Tell the ownerCt that it's child has changed and can be re-layed by ignoring the lastComponentSize cache.
257         if (ownerCt &amp;&amp; ownerCt.componentLayout) {
258             ownerCtComponentLayout = ownerCt.componentLayout;
259             if (!owner.floating &amp;&amp; ownerCtComponentLayout.monitorChildren &amp;&amp; !ownerCtComponentLayout.layoutBusy) {
260                 ownerCtComponentLayout.childrenChanged = true;
261             }
262         }
263     },
264
265     afterLayout : function(width, height, isSetSize, layoutOwner) {
266         this.doContainerLayout();
267         this.owner.afterComponentLayout(width, height, isSetSize, layoutOwner);
268     }
269 });
270 </pre>
271 </body>
272 </html>