3
* Copyright(c) 2006-2008, Ext JS, LLC.
6
* http://extjs.com/license
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
17
* @param {Ext.Element/String/Object} config The configuration options.
19
Ext.BoxComponent = Ext.extend(Ext.Component, {
22
* The local x (left) coordinate for this component if contained within a positioning container.
26
* The local y (top) coordinate for this component if contained within a positioning container.
30
* The page level x coordinate for this component if contained within a positioning container.
34
* The page level y coordinate for this component if contained within a positioning container.
37
* @cfg {Number} height
38
* The height of this component in pixels (defaults to auto).
42
* The width of this component in pixels (defaults to auto).
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).
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).
53
/* // private internal config
54
* {Boolean} deferHeight
55
* True to defer height calculations to an external component, false to allow this component to set its own
56
* height (defaults to false).
60
initComponent : function(){
61
Ext.BoxComponent.superclass.initComponent.call(this);
65
* Fires after the component is resized.
66
* @param {Ext.Component} this
67
* @param {Number} adjWidth The box-adjusted width that was set
68
* @param {Number} adjHeight The box-adjusted height that was set
69
* @param {Number} rawWidth The width that was originally specified
70
* @param {Number} rawHeight The height that was originally specified
75
* Fires after the component is moved.
76
* @param {Ext.Component} this
77
* @param {Number} x The new x position
78
* @param {Number} y The new y position
84
// private, set in afterRender to signify that the component has been rendered
86
// private, used to defer height settings to subclasses
90
* Sets the width and height of the component. This method fires the {@link #resize} event. This method can accept
91
* either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
92
* @param {Number/Object} width The new width to set, or a size object in the format {width, height}
93
* @param {Number} height The new height to set (not required if a size object is passed as the first arg)
94
* @return {Ext.BoxComponent} this
96
setSize : function(w, h){
97
// support for standard size objects
98
if(typeof w == 'object'){
109
// prevent recalcs when not needed
110
if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
113
this.lastSize = {width: w, height: h};
114
var adj = this.adjustSize(w, h);
115
var aw = adj.width, ah = adj.height;
116
if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
117
var rz = this.getResizeEl();
118
if(!this.deferHeight && aw !== undefined && ah !== undefined){
120
}else if(!this.deferHeight && ah !== undefined){
122
}else if(aw !== undefined){
125
this.onResize(aw, ah, w, h);
126
this.fireEvent('resize', this, aw, ah, w, h);
132
* Sets the width of the component. This method fires the {@link #resize} event.
133
* @param {Number} width The new width to set
134
* @return {Ext.BoxComponent} this
136
setWidth : function(width){
137
return this.setSize(width);
141
* Sets the height of the component. This method fires the {@link #resize} event.
142
* @param {Number} height The new height to set
143
* @return {Ext.BoxComponent} this
145
setHeight : function(height){
146
return this.setSize(undefined, height);
150
* Gets the current size of the component's underlying element.
151
* @return {Object} An object containing the element's size {width: (element width), height: (element height)}
153
getSize : function(){
154
return this.el.getSize();
158
* Gets the current XY position of the component's underlying element.
159
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
160
* @return {Array} The XY position of the element (e.g., [100, 200])
162
getPosition : function(local){
164
return [this.el.getLeft(true), this.el.getTop(true)];
166
return this.xy || this.el.getXY();
170
* Gets the current box measurements of the component's underlying element.
171
* @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
172
* @return {Object} box An object in the format {x, y, width, height}
174
getBox : function(local){
175
var s = this.el.getSize();
177
s.x = this.el.getLeft(true);
178
s.y = this.el.getTop(true);
180
var xy = this.xy || this.el.getXY();
188
* Sets the current box measurements of the component's underlying element.
189
* @param {Object} box An object in the format {x, y, width, height}
190
* @return {Ext.BoxComponent} this
192
updateBox : function(box){
193
this.setSize(box.width, box.height);
194
this.setPagePosition(box.x, box.y);
199
getResizeEl : function(){
200
return this.resizeEl || this.el;
204
getPositionEl : function(){
205
return this.positionEl || this.el;
209
* Sets the left and top of the component. To set the page XY position instead, use {@link #setPagePosition}.
210
* This method fires the {@link #move} event.
211
* @param {Number} left The new left
212
* @param {Number} top The new top
213
* @return {Ext.BoxComponent} this
215
setPosition : function(x, y){
216
if(x && typeof x[1] == 'number'){
225
var adj = this.adjustPosition(x, y);
226
var ax = adj.x, ay = adj.y;
228
var el = this.getPositionEl();
229
if(ax !== undefined || ay !== undefined){
230
if(ax !== undefined && ay !== undefined){
231
el.setLeftTop(ax, ay);
232
}else if(ax !== undefined){
234
}else if(ay !== undefined){
237
this.onPosition(ax, ay);
238
this.fireEvent('move', this, ax, ay);
244
* Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
245
* This method fires the {@link #move} event.
246
* @param {Number} x The new x position
247
* @param {Number} y The new y position
248
* @return {Ext.BoxComponent} this
250
setPagePosition : function(x, y){
251
if(x && typeof x[1] == 'number'){
260
if(x === undefined || y === undefined){ // cannot translate undefined points
263
var p = this.el.translatePoints(x, y);
264
this.setPosition(p.left, p.top);
269
onRender : function(ct, position){
270
Ext.BoxComponent.superclass.onRender.call(this, ct, position);
272
this.resizeEl = Ext.get(this.resizeEl);
275
this.positionEl = Ext.get(this.positionEl);
280
afterRender : function(){
281
Ext.BoxComponent.superclass.afterRender.call(this);
282
this.boxReady = true;
283
this.setSize(this.width, this.height);
284
if(this.x || this.y){
285
this.setPosition(this.x, this.y);
286
}else if(this.pageX || this.pageY){
287
this.setPagePosition(this.pageX, this.pageY);
292
* Force the component's size to recalculate based on the underlying element's current height and width.
293
* @return {Ext.BoxComponent} this
295
syncSize : function(){
296
delete this.lastSize;
297
this.setSize(this.autoWidth ? undefined : this.el.getWidth(), this.autoHeight ? undefined : this.el.getHeight());
302
* Called after the component is resized, this method is empty by default but can be implemented by any
303
* subclass that needs to perform custom logic after a resize occurs.
304
* @param {Number} adjWidth The box-adjusted width that was set
305
* @param {Number} adjHeight The box-adjusted height that was set
306
* @param {Number} rawWidth The width that was originally specified
307
* @param {Number} rawHeight The height that was originally specified
309
onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
314
* Called after the component is moved, this method is empty by default but can be implemented by any
315
* subclass that needs to perform custom logic after a move occurs.
316
* @param {Number} x The new x position
317
* @param {Number} y The new y position
319
onPosition : function(x, y){
324
adjustSize : function(w, h){
331
return {width : w, height: h};
335
adjustPosition : function(x, y){
336
return {x : x, y: y};
339
Ext.reg('box', Ext.BoxComponent);
b'\\ No newline at end of file'