← 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/Editor.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/Editor.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.Editor
 
11
 * @extends Ext.Component
 
12
 * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
 
13
 * @constructor
 
14
 * Create a new Editor
 
15
 * @param {Ext.form.Field} field The Field object (or descendant)
 
16
 * @param {Object} config The config object
 
17
 */
 
18
Ext.Editor = function(field, config){
 
19
    this.field = field;
 
20
    Ext.Editor.superclass.constructor.call(this, config);
 
21
};
 
22
 
 
23
Ext.extend(Ext.Editor, Ext.Component, {
 
24
    /**
 
25
     * @cfg {Boolean/String} autoSize
 
26
     * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
 
27
     * or "height" to adopt the height only (defaults to false)
 
28
     */
 
29
    /**
 
30
     * @cfg {Boolean} revertInvalid
 
31
     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
 
32
     * validation fails (defaults to true)
 
33
     */
 
34
    /**
 
35
     * @cfg {Boolean} ignoreNoChange
 
36
     * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
 
37
     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
 
38
     * will never be ignored.
 
39
     */
 
40
    /**
 
41
     * @cfg {Boolean} hideEl
 
42
     * False to keep the bound element visible while the editor is displayed (defaults to true)
 
43
     */
 
44
    /**
 
45
     * @cfg {Mixed} value
 
46
     * The data value of the underlying field (defaults to "")
 
47
     */
 
48
    value : "",
 
49
    /**
 
50
     * @cfg {String} alignment
 
51
     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
 
52
     */
 
53
    alignment: "c-c?",
 
54
    /**
 
55
     * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
 
56
     * for bottom-right shadow (defaults to "frame")
 
57
     */
 
58
    shadow : "frame",
 
59
    /**
 
60
     * @cfg {Boolean} constrain True to constrain the editor to the viewport
 
61
     */
 
62
    constrain : false,
 
63
    /**
 
64
     * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
 
65
     */
 
66
    swallowKeys : true,
 
67
    /**
 
68
     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed (defaults to false)
 
69
     */
 
70
    completeOnEnter : false,
 
71
    /**
 
72
     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
 
73
     */
 
74
    cancelOnEsc : false,
 
75
    /**
 
76
     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
 
77
     */
 
78
    updateEl : false,
 
79
 
 
80
    initComponent : function(){
 
81
        Ext.Editor.superclass.initComponent.call(this);
 
82
        this.addEvents(
 
83
            /**
 
84
             * @event beforestartedit
 
85
             * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
 
86
             * false from the handler of this event.
 
87
             * @param {Editor} this
 
88
             * @param {Ext.Element} boundEl The underlying element bound to this editor
 
89
             * @param {Mixed} value The field value being set
 
90
             */
 
91
            "beforestartedit",
 
92
            /**
 
93
             * @event startedit
 
94
             * Fires when this editor is displayed
 
95
             * @param {Ext.Element} boundEl The underlying element bound to this editor
 
96
             * @param {Mixed} value The starting field value
 
97
             */
 
98
            "startedit",
 
99
            /**
 
100
             * @event beforecomplete
 
101
             * Fires after a change has been made to the field, but before the change is reflected in the underlying
 
102
             * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
 
103
             * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
 
104
             * event will not fire since no edit actually occurred.
 
105
             * @param {Editor} this
 
106
             * @param {Mixed} value The current field value
 
107
             * @param {Mixed} startValue The original field value
 
108
             */
 
109
            "beforecomplete",
 
110
            /**
 
111
             * @event complete
 
112
             * Fires after editing is complete and any changed value has been written to the underlying field.
 
113
             * @param {Editor} this
 
114
             * @param {Mixed} value The current field value
 
115
             * @param {Mixed} startValue The original field value
 
116
             */
 
117
            "complete",
 
118
            /**
 
119
             * @event canceledit
 
120
             * Fires after editing has been canceled and the editor's value has been reset.
 
121
             * @param {Editor} this
 
122
             * @param {Mixed} value The user-entered field value that was discarded
 
123
             * @param {Mixed} startValue The original field value that was set back into the editor after cancel
 
124
             */
 
125
            "canceledit",
 
126
            /**
 
127
             * @event specialkey
 
128
             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
 
129
             * {@link Ext.EventObject#getKey} to determine which key was pressed.
 
130
             * @param {Ext.form.Field} this
 
131
             * @param {Ext.EventObject} e The event object
 
132
             */
 
133
            "specialkey"
 
134
        );
 
135
    },
 
136
 
 
137
    // private
 
138
    onRender : function(ct, position){
 
139
        this.el = new Ext.Layer({
 
140
            shadow: this.shadow,
 
141
            cls: "x-editor",
 
142
            parentEl : ct,
 
143
            shim : this.shim,
 
144
            shadowOffset:4,
 
145
            id: this.id,
 
146
            constrain: this.constrain
 
147
        });
 
148
        this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
 
149
        if(this.field.msgTarget != 'title'){
 
150
            this.field.msgTarget = 'qtip';
 
151
        }
 
152
        this.field.inEditor = true;
 
153
        this.field.render(this.el);
 
154
        if(Ext.isGecko){
 
155
            this.field.el.dom.setAttribute('autocomplete', 'off');
 
156
        }
 
157
        this.field.on("specialkey", this.onSpecialKey, this);
 
158
        if(this.swallowKeys){
 
159
            this.field.el.swallowEvent(['keydown','keypress']);
 
160
        }
 
161
        this.field.show();
 
162
        this.field.on("blur", this.onBlur, this);
 
163
        if(this.field.grow){
 
164
            this.field.on("autosize", this.el.sync,  this.el, {delay:1});
 
165
        }
 
166
    },
 
167
 
 
168
    // private
 
169
    onSpecialKey : function(field, e){
 
170
        var key = e.getKey();
 
171
        if(this.completeOnEnter && key == e.ENTER){
 
172
            e.stopEvent();
 
173
            this.completeEdit();
 
174
        }else if(this.cancelOnEsc && key == e.ESC){
 
175
            this.cancelEdit();
 
176
        }else{
 
177
            this.fireEvent('specialkey', field, e);
 
178
        }
 
179
        if(this.field.triggerBlur && (key == e.ENTER || key == e.ESC || key == e.TAB)){
 
180
            this.field.triggerBlur();
 
181
        }
 
182
    },
 
183
 
 
184
    /**
 
185
     * Starts the editing process and shows the editor.
 
186
     * @param {Mixed} el The element to edit
 
187
     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
 
188
      * to the innerHTML of el.
 
189
     */
 
190
    startEdit : function(el, value){
 
191
        if(this.editing){
 
192
            this.completeEdit();
 
193
        }
 
194
        this.boundEl = Ext.get(el);
 
195
        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
 
196
        if(!this.rendered){
 
197
            this.render(this.parentEl || document.body);
 
198
        }
 
199
        if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
 
200
            return;
 
201
        }
 
202
        this.startValue = v;
 
203
        this.field.setValue(v);
 
204
        this.doAutoSize();
 
205
        this.el.alignTo(this.boundEl, this.alignment);
 
206
        this.editing = true;
 
207
        this.show();
 
208
    },
 
209
 
 
210
    // private
 
211
    doAutoSize : function(){
 
212
        if(this.autoSize){
 
213
            var sz = this.boundEl.getSize();
 
214
            switch(this.autoSize){
 
215
                case "width":
 
216
                    this.setSize(sz.width,  "");
 
217
                break;
 
218
                case "height":
 
219
                    this.setSize("",  sz.height);
 
220
                break;
 
221
                default:
 
222
                    this.setSize(sz.width,  sz.height);
 
223
            }
 
224
        }
 
225
    },
 
226
 
 
227
    /**
 
228
     * Sets the height and width of this editor.
 
229
     * @param {Number} width The new width
 
230
     * @param {Number} height The new height
 
231
     */
 
232
    setSize : function(w, h){
 
233
        delete this.field.lastSize;
 
234
        this.field.setSize(w, h);
 
235
        if(this.el){
 
236
                if(Ext.isGecko2 || Ext.isOpera){
 
237
                    // prevent layer scrollbars
 
238
                    this.el.setSize(w, h);
 
239
                }
 
240
            this.el.sync();
 
241
        }
 
242
    },
 
243
 
 
244
    /**
 
245
     * Realigns the editor to the bound field based on the current alignment config value.
 
246
     */
 
247
    realign : function(){
 
248
        this.el.alignTo(this.boundEl, this.alignment);
 
249
    },
 
250
 
 
251
    /**
 
252
     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
 
253
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
 
254
     */
 
255
    completeEdit : function(remainVisible){
 
256
        if(!this.editing){
 
257
            return;
 
258
        }
 
259
        var v = this.getValue();
 
260
        if(this.revertInvalid !== false && !this.field.isValid()){
 
261
            v = this.startValue;
 
262
            this.cancelEdit(true);
 
263
        }
 
264
        if(String(v) === String(this.startValue) && this.ignoreNoChange){
 
265
            this.editing = false;
 
266
            this.hide();
 
267
            return;
 
268
        }
 
269
        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
 
270
            this.editing = false;
 
271
            if(this.updateEl && this.boundEl){
 
272
                this.boundEl.update(v);
 
273
            }
 
274
            if(remainVisible !== true){
 
275
                this.hide();
 
276
            }
 
277
            this.fireEvent("complete", this, v, this.startValue);
 
278
        }
 
279
    },
 
280
 
 
281
    // private
 
282
    onShow : function(){
 
283
        this.el.show();
 
284
        if(this.hideEl !== false){
 
285
            this.boundEl.hide();
 
286
        }
 
287
        this.field.show();
 
288
        if(Ext.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
 
289
            this.fixIEFocus = true;
 
290
            this.deferredFocus.defer(50, this);
 
291
        }else{
 
292
            this.field.focus();
 
293
        }
 
294
        this.fireEvent("startedit", this.boundEl, this.startValue);
 
295
    },
 
296
 
 
297
    deferredFocus : function(){
 
298
        if(this.editing){
 
299
            this.field.focus();
 
300
        }
 
301
    },
 
302
 
 
303
    /**
 
304
     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
 
305
     * reverted to the original starting value.
 
306
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
 
307
     * cancel (defaults to false)
 
308
     */
 
309
    cancelEdit : function(remainVisible){
 
310
        if(this.editing){
 
311
            var v = this.getValue();
 
312
            this.setValue(this.startValue);
 
313
            if(remainVisible !== true){
 
314
                this.hide();
 
315
            }
 
316
            this.fireEvent("canceledit", this, v, this.startValue);
 
317
        }
 
318
    },
 
319
 
 
320
    // private
 
321
    onBlur : function(){
 
322
        if(this.allowBlur !== true && this.editing){
 
323
            this.completeEdit();
 
324
        }
 
325
    },
 
326
 
 
327
    // private
 
328
    onHide : function(){
 
329
        if(this.editing){
 
330
            this.completeEdit();
 
331
            return;
 
332
        }
 
333
        this.field.blur();
 
334
        if(this.field.collapse){
 
335
            this.field.collapse();
 
336
        }
 
337
        this.el.hide();
 
338
        if(this.hideEl !== false){
 
339
            this.boundEl.show();
 
340
        }
 
341
    },
 
342
 
 
343
    /**
 
344
     * Sets the data value of the editor
 
345
     * @param {Mixed} value Any valid value supported by the underlying field
 
346
     */
 
347
    setValue : function(v){
 
348
        this.field.setValue(v);
 
349
    },
 
350
 
 
351
    /**
 
352
     * Gets the data value of the editor
 
353
     * @return {Mixed} The data value
 
354
     */
 
355
    getValue : function(){
 
356
        return this.field.getValue();
 
357
    },
 
358
 
 
359
    beforeDestroy : function(){
 
360
        this.field.destroy();
 
361
        this.field = null;
 
362
    }
 
363
});
 
364
Ext.reg('editor', Ext.Editor);
 
 
b'\\ No newline at end of file'