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>