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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
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
20 * @param {Roo.Element/String/Object} config The configuration options.
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">/**
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
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">/**
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
42 </span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
43 </span><span class="jsdoc-syntax">});
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
54 /** @cfg {Number} height
55 * height (optional) size of component
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
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">;
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">;
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">&& </span><span class="jsdoc-var">this.lastSize.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&& </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">;
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">};
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">&& </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">){
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">&& </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">);
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">);
98 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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)}
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">();
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])
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">)];
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">();
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}
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];
136 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
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
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">;
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">;
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">;
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
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">;
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">;
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">&& </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">);
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">);
188 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
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
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">;
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">;
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">;
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">);
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">);
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">);
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">);
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
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">;
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
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">){
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
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">){
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">;
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">;
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">};
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">};
283 });</span></code></body></html>