3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
9 * @extends Ext.Component
10 * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
13 * @param {Object} config The config object
16 Ext.Editor = function(field, config){
18 this.field = Ext.create(field.field, 'textfield');
19 config = Ext.apply({}, field); // copy so we don't disturb original config
24 Ext.Editor.superclass.constructor.call(this, config);
27 Ext.extend(Ext.Editor, Ext.Component, {
29 * @cfg {Ext.form.Field} field
30 * The Field object (or descendant) or config object for field
33 * @cfg {Boolean} allowBlur
34 * True to {@link #completeEdit complete the editing process} if in edit mode when the
35 * field is blurred. Defaults to <tt>false</tt>.
38 * @cfg {Boolean/String} autoSize
39 * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
40 * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false)
43 * @cfg {Boolean} revertInvalid
44 * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
45 * validation fails (defaults to true)
48 * @cfg {Boolean} ignoreNoChange
49 * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
50 * the value has not changed (defaults to false). Applies only to string values - edits for other data types
51 * will never be ignored.
54 * @cfg {Boolean} hideEl
55 * False to keep the bound element visible while the editor is displayed (defaults to true)
59 * The data value of the underlying field (defaults to "")
63 * @cfg {String} alignment
64 * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
68 * @cfg {Array} offsets
69 * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to <tt>[0, 0]</tt>.
73 * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
74 * for bottom-right shadow (defaults to "frame")
78 * @cfg {Boolean} constrain True to constrain the editor to the viewport
82 * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
86 * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to <tt>true</tt>.
88 completeOnEnter : true,
90 * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
94 * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
98 initComponent : function(){
99 Ext.Editor.superclass.initComponent.call(this);
102 * @event beforestartedit
103 * Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
104 * false from the handler of this event.
105 * @param {Editor} this
106 * @param {Ext.Element} boundEl The underlying element bound to this editor
107 * @param {Mixed} value The field value being set
112 * Fires when this editor is displayed
113 * @param {Ext.Element} boundEl The underlying element bound to this editor
114 * @param {Mixed} value The starting field value
118 * @event beforecomplete
119 * Fires after a change has been made to the field, but before the change is reflected in the underlying
120 * field. Saving the change to the field can be canceled by returning false from the handler of this event.
121 * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
122 * event will not fire since no edit actually occurred.
123 * @param {Editor} this
124 * @param {Mixed} value The current field value
125 * @param {Mixed} startValue The original field value
130 * Fires after editing is complete and any changed value has been written to the underlying field.
131 * @param {Editor} this
132 * @param {Mixed} value The current field value
133 * @param {Mixed} startValue The original field value
138 * Fires after editing has been canceled and the editor's value has been reset.
139 * @param {Editor} this
140 * @param {Mixed} value The user-entered field value that was discarded
141 * @param {Mixed} startValue The original field value that was set back into the editor after cancel
146 * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
147 * {@link Ext.EventObject#getKey} to determine which key was pressed.
148 * @param {Ext.form.Field} this
149 * @param {Ext.EventObject} e The event object
156 onRender : function(ct, position){
157 this.el = new Ext.Layer({
162 shadowOffset: this.shadowOffset || 4,
164 constrain: this.constrain
167 this.el.setZIndex(this.zIndex);
169 this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
170 if(this.field.msgTarget != 'title'){
171 this.field.msgTarget = 'qtip';
173 this.field.inEditor = true;
174 this.mon(this.field, {
177 specialkey: this.onSpecialKey
180 this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1});
182 this.field.render(this.el).show();
183 this.field.getEl().dom.name = '';
184 if(this.swallowKeys){
185 this.field.el.swallowEvent([
186 'keypress', // *** Opera
187 'keydown' // *** all other browsers
193 onSpecialKey : function(field, e){
194 var key = e.getKey(),
195 complete = this.completeOnEnter && key == e.ENTER,
196 cancel = this.cancelOnEsc && key == e.ESC;
197 if(complete || cancel){
204 if(field.triggerBlur){
208 this.fireEvent('specialkey', field, e);
212 * Starts the editing process and shows the editor.
213 * @param {Mixed} el The element to edit
214 * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
215 * to the innerHTML of el.
217 startEdit : function(el, value){
221 this.boundEl = Ext.get(el);
222 var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
224 this.render(this.parentEl || document.body);
226 if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
229 this.field.setValue(v);
237 doAutoSize : function(){
239 var sz = this.boundEl.getSize(),
240 fs = this.field.getSize();
242 switch(this.autoSize){
244 this.setSize(sz.width, fs.height);
247 this.setSize(fs.width, sz.height);
250 this.setSize(fs.width, fs.height);
253 this.setSize(sz.width, sz.height);
259 * Sets the height and width of this editor.
260 * @param {Number} width The new width
261 * @param {Number} height The new height
263 setSize : function(w, h){
264 delete this.field.lastSize;
265 this.field.setSize(w, h);
267 if(Ext.isGecko2 || Ext.isOpera){
268 // prevent layer scrollbars
269 this.el.setSize(w, h);
276 * Realigns the editor to the bound field based on the current alignment config value.
277 * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
279 realign : function(autoSize){
280 if(autoSize === true){
283 this.el.alignTo(this.boundEl, this.alignment, this.offsets);
287 * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
288 * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
290 completeEdit : function(remainVisible){
294 var v = this.getValue();
295 if(!this.field.isValid()){
296 if(this.revertInvalid !== false){
297 this.cancelEdit(remainVisible);
301 if(String(v) === String(this.startValue) && this.ignoreNoChange){
302 this.hideEdit(remainVisible);
305 if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
307 if(this.updateEl && this.boundEl){
308 this.boundEl.update(v);
310 this.hideEdit(remainVisible);
311 this.fireEvent("complete", this, v, this.startValue);
318 if(this.hideEl !== false){
321 this.field.show().focus(false, true);
322 this.fireEvent("startedit", this.boundEl, this.startValue);
326 * Cancels the editing process and hides the editor without persisting any changes. The field value will be
327 * reverted to the original starting value.
328 * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
329 * cancel (defaults to false)
331 cancelEdit : function(remainVisible){
333 var v = this.getValue();
334 this.setValue(this.startValue);
335 this.hideEdit(remainVisible);
336 this.fireEvent("canceledit", this, v, this.startValue);
341 hideEdit: function(remainVisible){
342 if(remainVisible !== true){
343 this.editing = false;
350 // selectSameEditor flag allows the same editor to be started without onBlur firing on itself
351 if(this.allowBlur !== true && this.editing && this.selectSameEditor !== true){
363 if(this.field.collapse){
364 this.field.collapse();
367 if(this.hideEl !== false){
373 * Sets the data value of the editor
374 * @param {Mixed} value Any valid value supported by the underlying field
376 setValue : function(v){
377 this.field.setValue(v);
381 * Gets the data value of the editor
382 * @return {Mixed} The data value
384 getValue : function(){
385 return this.field.getValue();
388 beforeDestroy : function(){
389 Ext.destroyMembers(this, 'field');
391 delete this.parentEl;
395 Ext.reg('editor', Ext.Editor);