src/widgets/Editor.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.Editor
   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.
  11  * @constructor
  12  * Create a new Editor
  13  * @param {Object} config The config object
  14  * @xtype editor
  15  */
  16 Ext.Editor = function(field, config){
  17     if(field.field){
  18         this.field = Ext.create(field.field, 'textfield');
  19         config = Ext.apply({}, field); // copy so we don't disturb original config
  20         delete config.field;
  21     }else{
  22         this.field = field;
  23     }
  24     Ext.Editor.superclass.constructor.call(this, config);
  25 };
  26
  27 Ext.extend(Ext.Editor, Ext.Component, {
  28     /**
  29     * @cfg {Ext.form.Field} field
  30     * The Field object (or descendant) or config object for field
  31     */
  32     /**
  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>.
  36      */
  37     /**
  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)
  41      */
  42     /**
  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)
  46      */
  47     /**
  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.
  52      */
  53     /**
  54      * @cfg {Boolean} hideEl
  55      * False to keep the bound element visible while the editor is displayed (defaults to true)
  56      */
  57     /**
  58      * @cfg {Mixed} value
  59      * The data value of the underlying field (defaults to "")
  60      */
  61     value : "",
  62     /**
  63      * @cfg {String} alignment
  64      * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
  65      */
  66     alignment: "c-c?",
  67     /**
  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>.
  70      */
  71     offsets: [0, 0],
  72     /**
  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")
  75      */
  76     shadow : "frame",
  77     /**
  78      * @cfg {Boolean} constrain True to constrain the editor to the viewport
  79      */
  80     constrain : false,
  81     /**
  82      * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
  83      */
  84     swallowKeys : true,
  85     /**
  86      * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to <tt>true</tt>.
  87      */
  88     completeOnEnter : true,
  89     /**
  90      * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
  91      */
  92     cancelOnEsc : true,
  93     /**
  94      * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
  95      */
  96     updateEl : false,
  97
  98     initComponent : function(){
  99         Ext.Editor.superclass.initComponent.call(this);
 100         this.addEvents(
 101             /**
 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
 108              */
 109             "beforestartedit",
 110             /**
 111              * @event startedit
 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
 115              */
 116             "startedit",
 117             /**
 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
 126              */
 127             "beforecomplete",
 128             /**
 129              * @event complete
 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
 134              */
 135             "complete",
 136             /**
 137              * @event canceledit
 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
 142              */
 143             "canceledit",
 144             /**
 145              * @event specialkey
 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
 150              */
 151             "specialkey"
 152         );
 153     },
 154
 155     // private
 156     onRender : function(ct, position){
 157         this.el = new Ext.Layer({
 158             shadow: this.shadow,
 159             cls: "x-editor",
 160             parentEl : ct,
 161             shim : this.shim,
 162             shadowOffset: this.shadowOffset || 4,
 163             id: this.id,
 164             constrain: this.constrain
 165         });
 166         if(this.zIndex){
 167             this.el.setZIndex(this.zIndex);
 168         }
 169         this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
 170         if(this.field.msgTarget != 'title'){
 171             this.field.msgTarget = 'qtip';
 172         }
 173         this.field.inEditor = true;
 174         this.mon(this.field, {
 175             scope: this,
 176             blur: this.onBlur,
 177             specialkey: this.onSpecialKey
 178         });
 179         if(this.field.grow){
 180             this.mon(this.field, "autosize", this.el.sync,  this.el, {delay:1});
 181         }
 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
 188             ]);
 189         }
 190     },
 191
 192     // private
 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){
 198             e.stopEvent();
 199             if(complete){
 200                 this.completeEdit();
 201             }else{
 202                 this.cancelEdit();
 203             }
 204             if(field.triggerBlur){
 205                 field.triggerBlur();
 206             }
 207         }
 208         this.fireEvent('specialkey', field, e);
 209     },
 210
 211     /**
 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.
 216      */
 217     startEdit : function(el, value){
 218         if(this.editing){
 219             this.completeEdit();
 220         }
 221         this.boundEl = Ext.get(el);
 222         var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
 223         if(!this.rendered){
 224             this.render(this.parentEl || document.body);
 225         }
 226         if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
 227             this.startValue = v;
 228             this.field.reset();
 229             this.field.setValue(v);
 230             this.realign(true);
 231             this.editing = true;
 232             this.show();
 233         }
 234     },
 235
 236     // private
 237     doAutoSize : function(){
 238         if(this.autoSize){
 239             var sz = this.boundEl.getSize(),
 240                 fs = this.field.getSize();
 241
 242             switch(this.autoSize){
 243                 case "width":
 244                     this.setSize(sz.width, fs.height);
 245                     break;
 246                 case "height":
 247                     this.setSize(fs.width, sz.height);
 248                     break;
 249                 case "none":
 250                     this.setSize(fs.width, fs.height);
 251                     break;
 252                 default:
 253                     this.setSize(sz.width, sz.height);
 254             }
 255         }
 256     },
 257
 258     /**
 259      * Sets the height and width of this editor.
 260      * @param {Number} width The new width
 261      * @param {Number} height The new height
 262      */
 263     setSize : function(w, h){
 264         delete this.field.lastSize;
 265         this.field.setSize(w, h);
 266         if(this.el){
 267             if(Ext.isGecko2 || Ext.isOpera){
 268                 // prevent layer scrollbars
 269                 this.el.setSize(w, h);
 270             }
 271             this.el.sync();
 272         }
 273     },
 274
 275     /**
 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.
 278      */
 279     realign : function(autoSize){
 280         if(autoSize === true){
 281             this.doAutoSize();
 282         }
 283         this.el.alignTo(this.boundEl, this.alignment, this.offsets);
 284     },
 285
 286     /**
 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)
 289      */
 290     completeEdit : function(remainVisible){
 291         if(!this.editing){
 292             return;
 293         }
 294         var v = this.getValue();
 295         if(!this.field.isValid()){
 296             if(this.revertInvalid !== false){
 297                 this.cancelEdit(remainVisible);
 298             }
 299             return;
 300         }
 301         if(String(v) === String(this.startValue) && this.ignoreNoChange){
 302             this.hideEdit(remainVisible);
 303             return;
 304         }
 305         if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
 306             v = this.getValue();
 307             if(this.updateEl && this.boundEl){
 308                 this.boundEl.update(v);
 309             }
 310             this.hideEdit(remainVisible);
 311             this.fireEvent("complete", this, v, this.startValue);
 312         }
 313     },
 314
 315     // private
 316     onShow : function(){
 317         this.el.show();
 318         if(this.hideEl !== false){
 319             this.boundEl.hide();
 320         }
 321         this.field.show().focus(false, true);
 322         this.fireEvent("startedit", this.boundEl, this.startValue);
 323     },
 324
 325     /**
 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)
 330      */
 331     cancelEdit : function(remainVisible){
 332         if(this.editing){
 333             var v = this.getValue();
 334             this.setValue(this.startValue);
 335             this.hideEdit(remainVisible);
 336             this.fireEvent("canceledit", this, v, this.startValue);
 337         }
 338     },
 339
 340     // private
 341     hideEdit: function(remainVisible){
 342         if(remainVisible !== true){
 343             this.editing = false;
 344             this.hide();
 345         }
 346     },
 347
 348     // private
 349     onBlur : function(){
 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){
 352             this.completeEdit();
 353         }
 354     },
 355
 356     // private
 357     onHide : function(){
 358         if(this.editing){
 359             this.completeEdit();
 360             return;
 361         }
 362         this.field.blur();
 363         if(this.field.collapse){
 364             this.field.collapse();
 365         }
 366         this.el.hide();
 367         if(this.hideEl !== false){
 368             this.boundEl.show();
 369         }
 370     },
 371
 372     /**
 373      * Sets the data value of the editor
 374      * @param {Mixed} value Any valid value supported by the underlying field
 375      */
 376     setValue : function(v){
 377         this.field.setValue(v);
 378     },
 379
 380     /**
 381      * Gets the data value of the editor
 382      * @return {Mixed} The data value
 383      */
 384     getValue : function(){
 385         return this.field.getValue();
 386     },
 387
 388     beforeDestroy : function(){
 389         Ext.destroyMembers(this, 'field');
 390
 391         delete this.parentEl;
 392         delete this.boundEl;
 393     }
 394 });
 395 Ext.reg('editor', Ext.Editor);