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>