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