projects / roojs1 / blob
? search:


f36d87ab454767a1d6ea6c7edddaf8bbc1b166b5
[roojs1] / docs / src / Roo_BoxComponent.js.html
1 <html><head><title>/home/edward/gitlive/roojs1/Roo/BoxComponent.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11
12 /**
13  * @class Roo.BoxComponent
14  * @extends Roo.Component
15  * Base class for any visual {@link Roo.Component} that uses a box container.  BoxComponent provides automatic box
16  * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
17  * container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
18  * layout containers.
19  * @constructor
20  * @param {Roo.Element/String/Object} config The configuration options.
21  */
22 </span><span class="jsdoc-var">Roo.BoxComponent </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
23     </span><span class="jsdoc-var">Roo.Component.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
24     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
25         </span><span class="jsdoc-comment">/**
26          * @event resize
27          * Fires after the component is resized.
28              * @param {Roo.Component} this
29              * @param {Number} adjWidth The box-adjusted width that was set
30              * @param {Number} adjHeight The box-adjusted height that was set
31              * @param {Number} rawWidth The width that was originally specified
32              * @param {Number} rawHeight The height that was originally specified
33              */
34         </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
35         </span><span class="jsdoc-comment">/**
36          * @event move
37          * Fires after the component is moved.
38              * @param {Roo.Component} this
39              * @param {Number} x The new x position
40              * @param {Number} y The new y position
41              */
42         </span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
43     </span><span class="jsdoc-syntax">});
44 };
45
46 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.BoxComponent</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Component</span><span class="jsdoc-syntax">, {
47     </span><span class="jsdoc-comment">// private, set in afterRender to signify that the component has been rendered
48     </span><span class="jsdoc-var">boxReady </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
49     </span><span class="jsdoc-comment">// private, used to defer height settings to subclasses
50     </span><span class="jsdoc-var">deferHeight</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
51     </span><span class="jsdoc-comment">/** @cfg {Number} width
52      * width (optional) size of component
53      */
54      /** @cfg {Number} height
55      * height (optional) size of component
56      */
57
58     /**
59      * Sets the width and height of the component.  This method fires the resize event.  This method can accept
60      * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
61      * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
62      * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
63      * @return {Roo.BoxComponent} this
64      */
65     </span><span class="jsdoc-var">setSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
66         </span><span class="jsdoc-comment">// support for standard size objects
67         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">){
68             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w.height</span><span class="jsdoc-syntax">;
69             </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w.width</span><span class="jsdoc-syntax">;
70         }
71         </span><span class="jsdoc-comment">// not rendered
72         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
73             </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">;
74             </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
75             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
76         }
77
78         </span><span class="jsdoc-comment">// prevent recalcs when not needed
79         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.lastSize.height </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
80             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
81         }
82         </span><span class="jsdoc-var">this.lastSize </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
83
84         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
85         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.height</span><span class="jsdoc-syntax">;
86         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// this code is nasty but performs better with floaters
87             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rz </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getResizeEl</span><span class="jsdoc-syntax">();
88             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.deferHeight </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
89                 </span><span class="jsdoc-var">rz.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">);
90             }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.deferHeight </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ah </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
91                 </span><span class="jsdoc-var">rz.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">);
92             }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
93                 </span><span class="jsdoc-var">rz.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">);
94             }
95             </span><span class="jsdoc-var">this.onResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
96             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">aw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ah</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
97         }
98         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
99     },
100
101     </span><span class="jsdoc-comment">/**
102      * Gets the current size of the component's underlying element.
103      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
104      */
105     </span><span class="jsdoc-var">getSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
106         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
107     },
108
109     </span><span class="jsdoc-comment">/**
110      * Gets the current XY position of the component's underlying element.
111      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
112      * @return {Array} The XY position of the element (e.g., [100, 200])
113      */
114     </span><span class="jsdoc-var">getPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
115         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
116             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.el.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">this.el.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)];
117         }
118         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
119     },
120
121     </span><span class="jsdoc-comment">/**
122      * Gets the current box measurements of the component's underlying element.
123      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
124      * @returns {Object} box An object in the format {x, y, width, height}
125      */
126     </span><span class="jsdoc-var">getBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
127         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
128         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">local</span><span class="jsdoc-syntax">){
129             </span><span class="jsdoc-var">s.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
130             </span><span class="jsdoc-var">s.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
131         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
132             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xy </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el.getXY</span><span class="jsdoc-syntax">();
133             </span><span class="jsdoc-var">s.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[0];
134             </span><span class="jsdoc-var">s.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xy</span><span class="jsdoc-syntax">[1];
135         }
136         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
137     },
138
139     </span><span class="jsdoc-comment">/**
140      * Sets the current box measurements of the component's underlying element.
141      * @param {Object} box An object in the format {x, y, width, height}
142      * @returns {Roo.BoxComponent} this
143      */
144     </span><span class="jsdoc-var">updateBox </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box</span><span class="jsdoc-syntax">){
145         </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.height</span><span class="jsdoc-syntax">);
146         </span><span class="jsdoc-var">this.setPagePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">box.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">box.y</span><span class="jsdoc-syntax">);
147         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
148     },
149
150     </span><span class="jsdoc-comment">// protected
151     </span><span class="jsdoc-var">getResizeEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
152         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
153     },
154
155     </span><span class="jsdoc-comment">// protected
156     </span><span class="jsdoc-var">getPositionEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
157         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.positionEl </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
158     },
159
160     </span><span class="jsdoc-comment">/**
161      * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
162      * This method fires the move event.
163      * @param {Number} left The new left
164      * @param {Number} top The new top
165      * @returns {Roo.BoxComponent} this
166      */
167     </span><span class="jsdoc-var">setPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
168         </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
169         </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
170         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
171             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
172         }
173         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">adj </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.adjustPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
174         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">adj.y</span><span class="jsdoc-syntax">;
175
176         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPositionEl</span><span class="jsdoc-syntax">();
177         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
178             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
179                 </span><span class="jsdoc-var">el.setLeftTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
180             }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
181                 </span><span class="jsdoc-var">el.setLeft</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">);
182             }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ay </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
183                 </span><span class="jsdoc-var">el.setTop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
184             }
185             </span><span class="jsdoc-var">this.onPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
186             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'move'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ay</span><span class="jsdoc-syntax">);
187         }
188         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
189     },
190
191     </span><span class="jsdoc-comment">/**
192      * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
193      * This method fires the move event.
194      * @param {Number} x The new x position
195      * @param {Number} y The new y position
196      * @returns {Roo.BoxComponent} this
197      */
198     </span><span class="jsdoc-var">setPagePosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
199         </span><span class="jsdoc-var">this.pageX </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">;
200         </span><span class="jsdoc-var">this.pageY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">;
201         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.boxReady</span><span class="jsdoc-syntax">){
202             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
203         }
204         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// cannot translate undefined points
205             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
206         }
207         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">p </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.translatePoints</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">);
208         </span><span class="jsdoc-var">this.setPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.left</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">p.top</span><span class="jsdoc-syntax">);
209         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
210     },
211
212     </span><span class="jsdoc-comment">// private
213     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
214         </span><span class="jsdoc-var">Roo.BoxComponent.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
215         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">){
216             </span><span class="jsdoc-var">this.resizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resizeEl</span><span class="jsdoc-syntax">);
217         }
218         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.positionEl</span><span class="jsdoc-syntax">){
219             </span><span class="jsdoc-var">this.positionEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.positionEl</span><span class="jsdoc-syntax">);
220         }
221     },
222
223     </span><span class="jsdoc-comment">// private
224     </span><span class="jsdoc-var">afterRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
225         </span><span class="jsdoc-var">Roo.BoxComponent.superclass.afterRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
226         </span><span class="jsdoc-var">this.boxReady </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
227         </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
228         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.y</span><span class="jsdoc-syntax">){
229             </span><span class="jsdoc-var">this.setPosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.y</span><span class="jsdoc-syntax">);
230         }
231         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pageX </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.pageY</span><span class="jsdoc-syntax">){
232             </span><span class="jsdoc-var">this.setPagePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.pageX</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.pageY</span><span class="jsdoc-syntax">);
233         }
234     },
235
236     </span><span class="jsdoc-comment">/**
237      * Force the component's size to recalculate based on the underlying element's current height and width.
238      * @returns {Roo.BoxComponent} this
239      */
240     </span><span class="jsdoc-var">syncSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
241         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.lastSize</span><span class="jsdoc-syntax">;
242         </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.el.getHeight</span><span class="jsdoc-syntax">());
243         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
244     },
245
246     </span><span class="jsdoc-comment">/**
247      * Called after the component is resized, this method is empty by default but can be implemented by any
248      * subclass that needs to perform custom logic after a resize occurs.
249      * @param {Number} adjWidth The box-adjusted width that was set
250      * @param {Number} adjHeight The box-adjusted height that was set
251      * @param {Number} rawWidth The width that was originally specified
252      * @param {Number} rawHeight The height that was originally specified
253      */
254     </span><span class="jsdoc-var">onResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">adjWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">adjHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rawWidth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rawHeight</span><span class="jsdoc-syntax">){
255
256     },
257
258     </span><span class="jsdoc-comment">/**
259      * Called after the component is moved, this method is empty by default but can be implemented by any
260      * subclass that needs to perform custom logic after a move occurs.
261      * @param {Number} x The new x position
262      * @param {Number} y The new y position
263      */
264     </span><span class="jsdoc-var">onPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
265
266     },
267
268     </span><span class="jsdoc-comment">// private
269     </span><span class="jsdoc-var">adjustSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">){
270         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoWidth</span><span class="jsdoc-syntax">){
271             </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
272         }
273         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoHeight</span><span class="jsdoc-syntax">){
274             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
275         }
276         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">};
277     },
278
279     </span><span class="jsdoc-comment">// private
280     </span><span class="jsdoc-var">adjustPosition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">){
281         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">};
282     }
283 });</span></code></body></html>
RooJS - Version 1