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