| 27 |
jpm |
1 |
/*
|
|
|
2 |
* Ext JS Library 2.0.2
|
|
|
3 |
* Copyright(c) 2006-2008, Ext JS, LLC.
|
|
|
4 |
* licensing@extjs.com
|
|
|
5 |
*
|
|
|
6 |
* http://extjs.com/license
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
/**
|
|
|
10 |
* @class Ext.BoxComponent
|
|
|
11 |
* @extends Ext.Component
|
|
|
12 |
* Base class for any visual {@link Ext.Component} that uses a box container. BoxComponent provides automatic box
|
|
|
13 |
* model adjustments for sizing and positioning and will work correctly withnin the Component rendering model. All
|
|
|
14 |
* container classes should subclass BoxComponent so that they will work consistently when nested within other Ext
|
|
|
15 |
* layout containers.
|
|
|
16 |
* @constructor
|
|
|
17 |
* @param {Ext.Element/String/Object} config The configuration options.
|
|
|
18 |
*/
|
|
|
19 |
Ext.BoxComponent = Ext.extend(Ext.Component, {
|
|
|
20 |
/**
|
|
|
21 |
* @cfg {Number} x
|
|
|
22 |
* The local x (left) coordinate for this component if contained within a positioning container.
|
|
|
23 |
*/
|
|
|
24 |
/**
|
|
|
25 |
* @cfg {Number} y
|
|
|
26 |
* The local y (top) coordinate for this component if contained within a positioning container.
|
|
|
27 |
*/
|
|
|
28 |
/**
|
|
|
29 |
* @cfg {Number} pageX
|
|
|
30 |
* The page level x coordinate for this component if contained within a positioning container.
|
|
|
31 |
*/
|
|
|
32 |
/**
|
|
|
33 |
* @cfg {Number} pageY
|
|
|
34 |
* The page level y coordinate for this component if contained within a positioning container.
|
|
|
35 |
*/
|
|
|
36 |
/**
|
|
|
37 |
* @cfg {Number} height
|
|
|
38 |
* The height of this component in pixels (defaults to auto).
|
|
|
39 |
*/
|
|
|
40 |
/**
|
|
|
41 |
* @cfg {Number} width
|
|
|
42 |
* The width of this component in pixels (defaults to auto).
|
|
|
43 |
*/
|
|
|
44 |
/**
|
|
|
45 |
* @cfg {Boolean} autoHeight
|
|
|
46 |
* True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not all will function as expected with a height of 'auto'. (defaults to false).
|
|
|
47 |
*/
|
|
|
48 |
/**
|
|
|
49 |
* @cfg {Boolean} autoWidth
|
|
|
50 |
* True to use width:'auto', false to use fixed width. Note: although many components inherit this config option, not all will function as expected with a width of 'auto'. (defaults to false).
|
|
|
51 |
*/
|
|
|
52 |
/* // private internal config
|
|
|
53 |
* @cfg {Boolean} deferHeight
|
|
|
54 |
* True to defer height calculations to an external component, false to allow this component to set its own
|
|
|
55 |
* height (defaults to false).
|
|
|
56 |
*/
|
|
|
57 |
|
|
|
58 |
initComponent : function(){
|
|
|
59 |
Ext.BoxComponent.superclass.initComponent.call(this);
|
|
|
60 |
this.addEvents(
|
|
|
61 |
/**
|
|
|
62 |
* @event resize
|
|
|
63 |
* Fires after the component is resized.
|
|
|
64 |
* @param {Ext.Component} this
|
|
|
65 |
* @param {Number} adjWidth The box-adjusted width that was set
|
|
|
66 |
* @param {Number} adjHeight The box-adjusted height that was set
|
|
|
67 |
* @param {Number} rawWidth The width that was originally specified
|
|
|
68 |
* @param {Number} rawHeight The height that was originally specified
|
|
|
69 |
*/
|
|
|
70 |
'resize',
|
|
|
71 |
/**
|
|
|
72 |
* @event move
|
|
|
73 |
* Fires after the component is moved.
|
|
|
74 |
* @param {Ext.Component} this
|
|
|
75 |
* @param {Number} x The new x position
|
|
|
76 |
* @param {Number} y The new y position
|
|
|
77 |
*/
|
|
|
78 |
'move'
|
|
|
79 |
);
|
|
|
80 |
},
|
|
|
81 |
|
|
|
82 |
// private, set in afterRender to signify that the component has been rendered
|
|
|
83 |
boxReady : false,
|
|
|
84 |
// private, used to defer height settings to subclasses
|
|
|
85 |
deferHeight: false,
|
|
|
86 |
|
|
|
87 |
/**
|
|
|
88 |
* Sets the width and height of the component. This method fires the resize event. This method can accept
|
|
|
89 |
* either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
|
|
|
90 |
* @param {Number/Object} width The new width to set, or a size object in the format {width, height}
|
|
|
91 |
* @param {Number} height The new height to set (not required if a size object is passed as the first arg)
|
|
|
92 |
* @return {Ext.BoxComponent} this
|
|
|
93 |
*/
|
|
|
94 |
setSize : function(w, h){
|
|
|
95 |
// support for standard size objects
|
|
|
96 |
if(typeof w == 'object'){
|
|
|
97 |
h = w.height;
|
|
|
98 |
w = w.width;
|
|
|
99 |
}
|
|
|
100 |
// not rendered
|
|
|
101 |
if(!this.boxReady){
|
|
|
102 |
this.width = w;
|
|
|
103 |
this.height = h;
|
|
|
104 |
return this;
|
|
|
105 |
}
|
|
|
106 |
|
|
|
107 |
// prevent recalcs when not needed
|
|
|
108 |
if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
|
|
|
109 |
return this;
|
|
|
110 |
}
|
|
|
111 |
this.lastSize = {width: w, height: h};
|
|
|
112 |
var adj = this.adjustSize(w, h);
|
|
|
113 |
var aw = adj.width, ah = adj.height;
|
|
|
114 |
if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
|
|
|
115 |
var rz = this.getResizeEl();
|
|
|
116 |
if(!this.deferHeight && aw !== undefined && ah !== undefined){
|
|
|
117 |
rz.setSize(aw, ah);
|
|
|
118 |
}else if(!this.deferHeight && ah !== undefined){
|
|
|
119 |
rz.setHeight(ah);
|
|
|
120 |
}else if(aw !== undefined){
|
|
|
121 |
rz.setWidth(aw);
|
|
|
122 |
}
|
|
|
123 |
this.onResize(aw, ah, w, h);
|
|
|
124 |
this.fireEvent('resize', this, aw, ah, w, h);
|
|
|
125 |
}
|
|
|
126 |
return this;
|
|
|
127 |
},
|
|
|
128 |
|
|
|
129 |
/**
|
|
|
130 |
* Sets the width of the component. This method fires the resize event.
|
|
|
131 |
* @param {Number} width The new width to set
|
|
|
132 |
* @return {Ext.BoxComponent} this
|
|
|
133 |
*/
|
|
|
134 |
setWidth : function(width){
|
|
|
135 |
return this.setSize(width);
|
|
|
136 |
},
|
|
|
137 |
|
|
|
138 |
/**
|
|
|
139 |
* Sets the height of the component. This method fires the resize event.
|
|
|
140 |
* @param {Number} height The new height to set
|
|
|
141 |
* @return {Ext.BoxComponent} this
|
|
|
142 |
*/
|
|
|
143 |
setHeight : function(height){
|
|
|
144 |
return this.setSize(undefined, height);
|
|
|
145 |
},
|
|
|
146 |
|
|
|
147 |
/**
|
|
|
148 |
* Gets the current size of the component's underlying element.
|
|
|
149 |
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
|
|
|
150 |
*/
|
|
|
151 |
getSize : function(){
|
|
|
152 |
return this.el.getSize();
|
|
|
153 |
},
|
|
|
154 |
|
|
|
155 |
/**
|
|
|
156 |
* Gets the current XY position of the component's underlying element.
|
|
|
157 |
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
|
|
|
158 |
* @return {Array} The XY position of the element (e.g., [100, 200])
|
|
|
159 |
*/
|
|
|
160 |
getPosition : function(local){
|
|
|
161 |
if(local === true){
|
|
|
162 |
return [this.el.getLeft(true), this.el.getTop(true)];
|
|
|
163 |
}
|
|
|
164 |
return this.xy || this.el.getXY();
|
|
|
165 |
},
|
|
|
166 |
|
|
|
167 |
/**
|
|
|
168 |
* Gets the current box measurements of the component's underlying element.
|
|
|
169 |
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
|
|
|
170 |
* @return {Object} box An object in the format {x, y, width, height}
|
|
|
171 |
*/
|
|
|
172 |
getBox : function(local){
|
|
|
173 |
var s = this.el.getSize();
|
|
|
174 |
if(local === true){
|
|
|
175 |
s.x = this.el.getLeft(true);
|
|
|
176 |
s.y = this.el.getTop(true);
|
|
|
177 |
}else{
|
|
|
178 |
var xy = this.xy || this.el.getXY();
|
|
|
179 |
s.x = xy[0];
|
|
|
180 |
s.y = xy[1];
|
|
|
181 |
}
|
|
|
182 |
return s;
|
|
|
183 |
},
|
|
|
184 |
|
|
|
185 |
/**
|
|
|
186 |
* Sets the current box measurements of the component's underlying element.
|
|
|
187 |
* @param {Object} box An object in the format {x, y, width, height}
|
|
|
188 |
* @return {Ext.BoxComponent} this
|
|
|
189 |
*/
|
|
|
190 |
updateBox : function(box){
|
|
|
191 |
this.setSize(box.width, box.height);
|
|
|
192 |
this.setPagePosition(box.x, box.y);
|
|
|
193 |
return this;
|
|
|
194 |
},
|
|
|
195 |
|
|
|
196 |
// protected
|
|
|
197 |
getResizeEl : function(){
|
|
|
198 |
return this.resizeEl || this.el;
|
|
|
199 |
},
|
|
|
200 |
|
|
|
201 |
// protected
|
|
|
202 |
getPositionEl : function(){
|
|
|
203 |
return this.positionEl || this.el;
|
|
|
204 |
},
|
|
|
205 |
|
|
|
206 |
/**
|
|
|
207 |
* Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}.
|
|
|
208 |
* This method fires the move event.
|
|
|
209 |
* @param {Number} left The new left
|
|
|
210 |
* @param {Number} top The new top
|
|
|
211 |
* @return {Ext.BoxComponent} this
|
|
|
212 |
*/
|
|
|
213 |
setPosition : function(x, y){
|
|
|
214 |
if(x && typeof x[1] == 'number'){
|
|
|
215 |
y = x[1];
|
|
|
216 |
x = x[0];
|
|
|
217 |
}
|
|
|
218 |
this.x = x;
|
|
|
219 |
this.y = y;
|
|
|
220 |
if(!this.boxReady){
|
|
|
221 |
return this;
|
|
|
222 |
}
|
|
|
223 |
var adj = this.adjustPosition(x, y);
|
|
|
224 |
var ax = adj.x, ay = adj.y;
|
|
|
225 |
|
|
|
226 |
var el = this.getPositionEl();
|
|
|
227 |
if(ax !== undefined || ay !== undefined){
|
|
|
228 |
if(ax !== undefined && ay !== undefined){
|
|
|
229 |
el.setLeftTop(ax, ay);
|
|
|
230 |
}else if(ax !== undefined){
|
|
|
231 |
el.setLeft(ax);
|
|
|
232 |
}else if(ay !== undefined){
|
|
|
233 |
el.setTop(ay);
|
|
|
234 |
}
|
|
|
235 |
this.onPosition(ax, ay);
|
|
|
236 |
this.fireEvent('move', this, ax, ay);
|
|
|
237 |
}
|
|
|
238 |
return this;
|
|
|
239 |
},
|
|
|
240 |
|
|
|
241 |
/**
|
|
|
242 |
* Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
|
|
|
243 |
* This method fires the move event.
|
|
|
244 |
* @param {Number} x The new x position
|
|
|
245 |
* @param {Number} y The new y position
|
|
|
246 |
* @return {Ext.BoxComponent} this
|
|
|
247 |
*/
|
|
|
248 |
setPagePosition : function(x, y){
|
|
|
249 |
if(x && typeof x[1] == 'number'){
|
|
|
250 |
y = x[1];
|
|
|
251 |
x = x[0];
|
|
|
252 |
}
|
|
|
253 |
this.pageX = x;
|
|
|
254 |
this.pageY = y;
|
|
|
255 |
if(!this.boxReady){
|
|
|
256 |
return;
|
|
|
257 |
}
|
|
|
258 |
if(x === undefined || y === undefined){ // cannot translate undefined points
|
|
|
259 |
return;
|
|
|
260 |
}
|
|
|
261 |
var p = this.el.translatePoints(x, y);
|
|
|
262 |
this.setPosition(p.left, p.top);
|
|
|
263 |
return this;
|
|
|
264 |
},
|
|
|
265 |
|
|
|
266 |
// private
|
|
|
267 |
onRender : function(ct, position){
|
|
|
268 |
Ext.BoxComponent.superclass.onRender.call(this, ct, position);
|
|
|
269 |
if(this.resizeEl){
|
|
|
270 |
this.resizeEl = Ext.get(this.resizeEl);
|
|
|
271 |
}
|
|
|
272 |
if(this.positionEl){
|
|
|
273 |
this.positionEl = Ext.get(this.positionEl);
|
|
|
274 |
}
|
|
|
275 |
},
|
|
|
276 |
|
|
|
277 |
// private
|
|
|
278 |
afterRender : function(){
|
|
|
279 |
Ext.BoxComponent.superclass.afterRender.call(this);
|
|
|
280 |
this.boxReady = true;
|
|
|
281 |
this.setSize(this.width, this.height);
|
|
|
282 |
if(this.x || this.y){
|
|
|
283 |
this.setPosition(this.x, this.y);
|
|
|
284 |
}else if(this.pageX || this.pageY){
|
|
|
285 |
this.setPagePosition(this.pageX, this.pageY);
|
|
|
286 |
}
|
|
|
287 |
},
|
|
|
288 |
|
|
|
289 |
/**
|
|
|
290 |
* Force the component's size to recalculate based on the underlying element's current height and width.
|
|
|
291 |
* @return {Ext.BoxComponent} this
|
|
|
292 |
*/
|
|
|
293 |
syncSize : function(){
|
|
|
294 |
delete this.lastSize;
|
|
|
295 |
this.setSize(this.autoWidth ? undefined : this.el.getWidth(), this.autoHeight ? undefined : this.el.getHeight());
|
|
|
296 |
return this;
|
|
|
297 |
},
|
|
|
298 |
|
|
|
299 |
/* // protected
|
|
|
300 |
* Called after the component is resized, this method is empty by default but can be implemented by any
|
|
|
301 |
* subclass that needs to perform custom logic after a resize occurs.
|
|
|
302 |
* @param {Number} adjWidth The box-adjusted width that was set
|
|
|
303 |
* @param {Number} adjHeight The box-adjusted height that was set
|
|
|
304 |
* @param {Number} rawWidth The width that was originally specified
|
|
|
305 |
* @param {Number} rawHeight The height that was originally specified
|
|
|
306 |
*/
|
|
|
307 |
onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
|
|
|
308 |
|
|
|
309 |
},
|
|
|
310 |
|
|
|
311 |
/* // protected
|
|
|
312 |
* Called after the component is moved, this method is empty by default but can be implemented by any
|
|
|
313 |
* subclass that needs to perform custom logic after a move occurs.
|
|
|
314 |
* @param {Number} x The new x position
|
|
|
315 |
* @param {Number} y The new y position
|
|
|
316 |
*/
|
|
|
317 |
onPosition : function(x, y){
|
|
|
318 |
|
|
|
319 |
},
|
|
|
320 |
|
|
|
321 |
// private
|
|
|
322 |
adjustSize : function(w, h){
|
|
|
323 |
if(this.autoWidth){
|
|
|
324 |
w = 'auto';
|
|
|
325 |
}
|
|
|
326 |
if(this.autoHeight){
|
|
|
327 |
h = 'auto';
|
|
|
328 |
}
|
|
|
329 |
return {width : w, height: h};
|
|
|
330 |
},
|
|
|
331 |
|
|
|
332 |
// private
|
|
|
333 |
adjustPosition : function(x, y){
|
|
|
334 |
return {x : x, y: y};
|
|
|
335 |
}
|
|
|
336 |
});
|
|
|
337 |
Ext.reg('box', Ext.BoxComponent);
|