← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/ext/source/widgets/BoxComponent.js

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/ext/source/widgets/BoxComponent.js
 
1
/*
 
2
 * Ext JS Library 2.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
 
 
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).
 
57
     */
 
58
 
 
59
        // private
 
60
    initComponent : function(){
 
61
        Ext.BoxComponent.superclass.initComponent.call(this);
 
62
        this.addEvents(
 
63
            /**
 
64
             * @event resize
 
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
 
71
             */
 
72
            'resize',
 
73
            /**
 
74
             * @event move
 
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
 
79
             */
 
80
            'move'
 
81
        );
 
82
    },
 
83
 
 
84
    // private, set in afterRender to signify that the component has been rendered
 
85
    boxReady : false,
 
86
    // private, used to defer height settings to subclasses
 
87
    deferHeight: false,
 
88
 
 
89
    /**
 
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
 
95
     */
 
96
    setSize : function(w, h){
 
97
        // support for standard size objects
 
98
        if(typeof w == 'object'){
 
99
            h = w.height;
 
100
            w = w.width;
 
101
        }
 
102
        // not rendered
 
103
        if(!this.boxReady){
 
104
            this.width = w;
 
105
            this.height = h;
 
106
            return this;
 
107
        }
 
108
 
 
109
        // prevent recalcs when not needed
 
110
        if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
 
111
            return this;
 
112
        }
 
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){
 
119
                rz.setSize(aw, ah);
 
120
            }else if(!this.deferHeight && ah !== undefined){
 
121
                rz.setHeight(ah);
 
122
            }else if(aw !== undefined){
 
123
                rz.setWidth(aw);
 
124
            }
 
125
            this.onResize(aw, ah, w, h);
 
126
            this.fireEvent('resize', this, aw, ah, w, h);
 
127
        }
 
128
        return this;
 
129
    },
 
130
 
 
131
    /**
 
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
 
135
     */
 
136
    setWidth : function(width){
 
137
        return this.setSize(width);
 
138
    },
 
139
 
 
140
    /**
 
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
 
144
     */
 
145
    setHeight : function(height){
 
146
        return this.setSize(undefined, height);
 
147
    },
 
148
 
 
149
    /**
 
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)}
 
152
     */
 
153
    getSize : function(){
 
154
        return this.el.getSize();
 
155
    },
 
156
 
 
157
    /**
 
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])
 
161
     */
 
162
    getPosition : function(local){
 
163
        if(local === true){
 
164
            return [this.el.getLeft(true), this.el.getTop(true)];
 
165
        }
 
166
        return this.xy || this.el.getXY();
 
167
    },
 
168
 
 
169
    /**
 
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}
 
173
     */
 
174
    getBox : function(local){
 
175
        var s = this.el.getSize();
 
176
        if(local === true){
 
177
            s.x = this.el.getLeft(true);
 
178
            s.y = this.el.getTop(true);
 
179
        }else{
 
180
            var xy = this.xy || this.el.getXY();
 
181
            s.x = xy[0];
 
182
            s.y = xy[1];
 
183
        }
 
184
        return s;
 
185
    },
 
186
 
 
187
    /**
 
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
 
191
     */
 
192
    updateBox : function(box){
 
193
        this.setSize(box.width, box.height);
 
194
        this.setPagePosition(box.x, box.y);
 
195
        return this;
 
196
    },
 
197
 
 
198
    // protected
 
199
    getResizeEl : function(){
 
200
        return this.resizeEl || this.el;
 
201
    },
 
202
 
 
203
    // protected
 
204
    getPositionEl : function(){
 
205
        return this.positionEl || this.el;
 
206
    },
 
207
 
 
208
    /**
 
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
 
214
     */
 
215
    setPosition : function(x, y){
 
216
        if(x && typeof x[1] == 'number'){
 
217
            y = x[1];
 
218
            x = x[0];
 
219
        }
 
220
        this.x = x;
 
221
        this.y = y;
 
222
        if(!this.boxReady){
 
223
            return this;
 
224
        }
 
225
        var adj = this.adjustPosition(x, y);
 
226
        var ax = adj.x, ay = adj.y;
 
227
 
 
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){
 
233
                el.setLeft(ax);
 
234
            }else if(ay !== undefined){
 
235
                el.setTop(ay);
 
236
            }
 
237
            this.onPosition(ax, ay);
 
238
            this.fireEvent('move', this, ax, ay);
 
239
        }
 
240
        return this;
 
241
    },
 
242
 
 
243
    /**
 
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
 
249
     */
 
250
    setPagePosition : function(x, y){
 
251
        if(x && typeof x[1] == 'number'){
 
252
            y = x[1];
 
253
            x = x[0];
 
254
        }
 
255
        this.pageX = x;
 
256
        this.pageY = y;
 
257
        if(!this.boxReady){
 
258
            return;
 
259
        }
 
260
        if(x === undefined || y === undefined){ // cannot translate undefined points
 
261
            return;
 
262
        }
 
263
        var p = this.el.translatePoints(x, y);
 
264
        this.setPosition(p.left, p.top);
 
265
        return this;
 
266
    },
 
267
 
 
268
    // private
 
269
    onRender : function(ct, position){
 
270
        Ext.BoxComponent.superclass.onRender.call(this, ct, position);
 
271
        if(this.resizeEl){
 
272
            this.resizeEl = Ext.get(this.resizeEl);
 
273
        }
 
274
        if(this.positionEl){
 
275
            this.positionEl = Ext.get(this.positionEl);
 
276
        }
 
277
    },
 
278
 
 
279
    // private
 
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);
 
288
        }
 
289
    },
 
290
 
 
291
    /**
 
292
     * Force the component's size to recalculate based on the underlying element's current height and width.
 
293
     * @return {Ext.BoxComponent} this
 
294
     */
 
295
    syncSize : function(){
 
296
        delete this.lastSize;
 
297
        this.setSize(this.autoWidth ? undefined : this.el.getWidth(), this.autoHeight ? undefined : this.el.getHeight());
 
298
        return this;
 
299
    },
 
300
 
 
301
    /* // protected
 
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
 
308
     */
 
309
    onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
 
310
 
 
311
    },
 
312
 
 
313
    /* // protected
 
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
 
318
     */
 
319
    onPosition : function(x, y){
 
320
 
 
321
    },
 
322
 
 
323
    // private
 
324
    adjustSize : function(w, h){
 
325
        if(this.autoWidth){
 
326
            w = 'auto';
 
327
        }
 
328
        if(this.autoHeight){
 
329
            h = 'auto';
 
330
        }
 
331
        return {width : w, height: h};
 
332
    },
 
333
 
 
334
    // private
 
335
    adjustPosition : function(x, y){
 
336
        return {x : x, y: y};
 
337
    }
 
338
});
 
339
Ext.reg('box', Ext.BoxComponent);
 
 
b'\\ No newline at end of file'