1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, 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 | Ext.destroy(this.field); |
---|
361 | this.field = null; |
---|
362 | } |
---|
363 | }); |
---|
364 | Ext.reg('editor', Ext.Editor); |
---|