git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Editor.html
diff --git a/docs/source/Editor.html b/docs/source/Editor.html
index e96ae8a..6c2f4ae 100644 (file)
--- a/docs/source/Editor.html
+++ b/docs/source/Editor.html
@@ -1,411 +1,505 @@
+<!DOCTYPE html>
 <html>
 <head>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.Editor"></div>/**
- * @class Ext.Editor
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-Editor'>/**
+</span> * @class Ext.Editor
  * @extends Ext.Component
  * @extends Ext.Component
- * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
- * @constructor
- * Create a new Editor
- * @param {Object} config The config object
- * @xtype editor
- */
-Ext.Editor = function(field, config){
-    if(field.field){
-        this.field = Ext.create(field.field, 'textfield');
-        config = Ext.apply({}, field); // copy so we don't disturb original config
-        delete config.field;
-    }else{
-        this.field = field;
+ *
+ * &lt;p&gt;
+ * The Editor class is used to provide inline editing for elements on the page. The editor
+ * is backed by a {@link Ext.form.field.Field} that will be displayed to edit the underlying content.
+ * The editor is a floating Component, when the editor is shown it is automatically aligned to
+ * display over the top of the bound element it is editing. The Editor contains several options
+ * for how to handle key presses:
+ * &lt;ul&gt;
+ * &lt;li&gt;{@link #completeOnEnter}&lt;/li&gt;
+ * &lt;li&gt;{@link #cancelOnEsc}&lt;/li&gt;
+ * &lt;li&gt;{@link #swallowKeys}&lt;/li&gt;
+ * &lt;/ul&gt;
+ * It also has options for how to use the value once the editor has been activated:
+ * &lt;ul&gt;
+ * &lt;li&gt;{@link #revertInvalid}&lt;/li&gt;
+ * &lt;li&gt;{@link #ignoreNoChange}&lt;/li&gt;
+ * &lt;li&gt;{@link #updateEl}&lt;/li&gt;
+ * &lt;/ul&gt;
+ * Sample usage:
+ * &lt;/p&gt;
+ * &lt;pre&gt;&lt;code&gt;
+var editor = new Ext.Editor({
+    updateEl: true, // update the innerHTML of the bound element when editing completes
+    field: {
+        xtype: 'textfield'
     }
     }
-    Ext.Editor.superclass.constructor.call(this, config);
-};
+});
+var el = Ext.get('my-text'); // The element to 'edit'
+editor.startEdit(el); // The value of the field will be taken as the innerHTML of the element.
+ * &lt;/code&gt;&lt;/pre&gt;
+ * {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
+ *
+ */
+Ext.define('Ext.Editor', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.Component',
+
+    alias: 'widget.editor',
+
+    requires: ['Ext.layout.component.Editor'],
+
+    /* End Definitions */
 
 
-Ext.extend(Ext.Editor, Ext.Component, {
-    <div id="cfg-Ext.Editor-field"></div>/**
-    * @cfg {Ext.form.Field} field
+   componentLayout: 'editor',
+
+<span id='Ext-Editor-cfg-field'>    /**
+</span>    * @cfg {Ext.form.field.Field} field
     * The Field object (or descendant) or config object for field
     */
     * The Field object (or descendant) or config object for field
     */
-    <div id="cfg-Ext.Editor-allowBlur"></div>/**
-     * @cfg {Boolean} allowBlur
+
+<span id='Ext-Editor-cfg-allowBlur'>    /**
+</span>     * @cfg {Boolean} allowBlur
      * True to {@link #completeEdit complete the editing process} if in edit mode when the
      * True to {@link #completeEdit complete the editing process} if in edit mode when the
-     * field is blurred. Defaults to <tt>true</tt>.
+     * field is blurred.
      */
     allowBlur: true,
      */
     allowBlur: true,
-    <div id="cfg-Ext.Editor-autoSize"></div>/**
-     * @cfg {Boolean/String} autoSize
-     * True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
-     * or "height" to adopt the height only, "none" to always use the field dimensions. (defaults to false)
+
+<span id='Ext-Editor-cfg-autoSize'>    /**
+</span>     * @cfg {Boolean/Object} autoSize
+     * True for the editor to automatically adopt the size of the underlying field. Otherwise, an object
+     * can be passed to indicate where to get each dimension. The available properties are 'boundEl' and
+     * 'field'. If a dimension is not specified, it will use the underlying height/width specified on
+     * the editor object.
+     * Examples:
+     * &lt;pre&gt;&lt;code&gt;
+autoSize: true // The editor will be sized to the height/width of the field
+
+height: 21,
+autoSize: {
+    width: 'boundEl' // The width will be determined by the width of the boundEl, the height from the editor (21)
+}
+
+autoSize: {
+    width: 'field', // Width from the field
+    height: 'boundEl' // Height from the boundEl
+}
+     * &lt;/pre&gt;&lt;/code&gt;
      */
      */
-    <div id="cfg-Ext.Editor-revertInvalid"></div>/**
-     * @cfg {Boolean} revertInvalid
+
+<span id='Ext-Editor-cfg-revertInvalid'>    /**
+</span>     * @cfg {Boolean} revertInvalid
      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
      * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
-     * validation fails (defaults to true)
+     * validation fails
      */
      */
-    <div id="cfg-Ext.Editor-ignoreNoChange"></div>/**
-     * @cfg {Boolean} ignoreNoChange
+    revertInvalid: true,
+
+<span id='Ext-Editor-cfg-ignoreNoChange'>    /**
+</span>     * @cfg {Boolean} [ignoreNoChange=false]
      * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
      * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
-     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
+     * the value has not changed.  Applies only to string values - edits for other data types
      * will never be ignored.
      */
      * will never be ignored.
      */
-    <div id="cfg-Ext.Editor-hideEl"></div>/**
-     * @cfg {Boolean} hideEl
-     * False to keep the bound element visible while the editor is displayed (defaults to true)
+
+<span id='Ext-Editor-cfg-hideEl'>    /**
+</span>     * @cfg {Boolean} [hideEl=true]
+     * False to keep the bound element visible while the editor is displayed
      */
      */
-    <div id="cfg-Ext.Editor-value"></div>/**
-     * @cfg {Mixed} value
-     * The data value of the underlying field (defaults to "")
+
+<span id='Ext-Editor-cfg-value'>    /**
+</span>     * @cfg {Object} value
+     * The data value of the underlying field
      */
      */
-    value : "",
-    <div id="cfg-Ext.Editor-alignment"></div>/**
-     * @cfg {String} alignment
-     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to "c-c?").
+    value : '',
+
+<span id='Ext-Editor-cfg-alignment'>    /**
+</span>     * @cfg {String} alignment
+     * The position to align to (see {@link Ext.Element#alignTo} for more details).
      */
      */
-    alignment: "c-c?",
-    <div id="cfg-Ext.Editor-offsets"></div>/**
-     * @cfg {Array} offsets
-     * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to <tt>[0, 0]</tt>.
+    alignment: 'c-c?',
+
+<span id='Ext-Editor-cfg-offsets'>    /**
+</span>     * @cfg {Number[]} offsets
+     * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details.
      */
     offsets: [0, 0],
      */
     offsets: [0, 0],
-    <div id="cfg-Ext.Editor-shadow"></div>/**
-     * @cfg {Boolean/String} shadow "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop"
-     * for bottom-right shadow (defaults to "frame")
+
+<span id='Ext-Editor-cfg-shadow'>    /**
+</span>     * @cfg {Boolean/String} shadow
+     * &quot;sides&quot; for sides/bottom only, &quot;frame&quot; for 4-way shadow, and &quot;drop&quot; for bottom-right shadow.
      */
      */
-    shadow : "frame",
-    <div id="cfg-Ext.Editor-constrain"></div>/**
-     * @cfg {Boolean} constrain True to constrain the editor to the viewport
+    shadow : 'frame',
+
+<span id='Ext-Editor-cfg-constrain'>    /**
+</span>     * @cfg {Boolean} constrain
+     * True to constrain the editor to the viewport
      */
     constrain : false,
      */
     constrain : false,
-    <div id="cfg-Ext.Editor-swallowKeys"></div>/**
-     * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
+
+<span id='Ext-Editor-cfg-swallowKeys'>    /**
+</span>     * @cfg {Boolean} swallowKeys
+     * Handle the keydown/keypress events so they don't propagate
      */
     swallowKeys : true,
      */
     swallowKeys : true,
-    <div id="cfg-Ext.Editor-completeOnEnter"></div>/**
-     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to <tt>true</tt>.
+
+<span id='Ext-Editor-cfg-completeOnEnter'>    /**
+</span>     * @cfg {Boolean} completeOnEnter
+     * True to complete the edit when the enter key is pressed.
      */
     completeOnEnter : true,
      */
     completeOnEnter : true,
-    <div id="cfg-Ext.Editor-cancelOnEsc"></div>/**
-     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to <tt>true</tt>.
+
+<span id='Ext-Editor-cfg-cancelOnEsc'>    /**
+</span>     * @cfg {Boolean} cancelOnEsc
+     * True to cancel the edit when the escape key is pressed.
      */
     cancelOnEsc : true,
      */
     cancelOnEsc : true,
-    <div id="cfg-Ext.Editor-updateEl"></div>/**
-     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
+
+<span id='Ext-Editor-cfg-updateEl'>    /**
+</span>     * @cfg {Boolean} updateEl
+     * True to update the innerHTML of the bound element when the update completes
      */
     updateEl : false,
 
      */
     updateEl : false,
 
-    initComponent : function(){
-        Ext.Editor.superclass.initComponent.call(this);
-        this.addEvents(
-            <div id="event-Ext.Editor-beforestartedit"></div>/**
-             * @event beforestartedit
+<span id='Ext-Editor-cfg-parentEl'>    /**
+</span>     * @cfg {String/HTMLElement/Ext.Element} parentEl
+     * An element to render to. Defaults to the &lt;tt&gt;document.body&lt;/tt&gt;.
+     */
+
+    // private overrides
+    hidden: true,
+    baseCls: Ext.baseCSSPrefix + 'editor',
+
+    initComponent : function() {
+        var me = this,
+            field = me.field = Ext.ComponentManager.create(me.field, 'textfield');
+
+        Ext.apply(field, {
+            inEditor: true,
+            msgTarget: field.msgTarget == 'title' ? 'title' :  'qtip'
+        });
+        me.mon(field, {
+            scope: me,
+            blur: {
+                fn: me.onBlur,
+                // slight delay to avoid race condition with startEdits (e.g. grid view refresh)
+                delay: 1
+            },
+            specialkey: me.onSpecialKey
+        });
+
+        if (field.grow) {
+            me.mon(field, 'autosize', me.onAutoSize,  me, {delay: 1});
+        }
+        me.floating = {
+            constrain: me.constrain
+        };
+
+        me.callParent(arguments);
+
+        me.addEvents(
+<span id='Ext-Editor-event-beforestartedit'>            /**
+</span>             * @event beforestartedit
              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
              * false from the handler of this event.
              * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
              * false from the handler of this event.
-             * @param {Editor} this
+             * @param {Ext.Editor} this
              * @param {Ext.Element} boundEl The underlying element bound to this editor
              * @param {Ext.Element} boundEl The underlying element bound to this editor
-             * @param {Mixed} value The field value being set
+             * @param {Object} value The field value being set
              */
              */
-            "beforestartedit",
-            <div id="event-Ext.Editor-startedit"></div>/**
-             * @event startedit
+            'beforestartedit',
+
+<span id='Ext-Editor-event-startedit'>            /**
+</span>             * @event startedit
              * Fires when this editor is displayed
              * Fires when this editor is displayed
+             * @param {Ext.Editor} this
              * @param {Ext.Element} boundEl The underlying element bound to this editor
              * @param {Ext.Element} boundEl The underlying element bound to this editor
-             * @param {Mixed} value The starting field value
+             * @param {Object} value The starting field value
              */
              */
-            "startedit",
-            <div id="event-Ext.Editor-beforecomplete"></div>/**
-             * @event beforecomplete
+            'startedit',
+
+<span id='Ext-Editor-event-beforecomplete'>            /**
+</span>             * @event beforecomplete
              * Fires after a change has been made to the field, but before the change is reflected in the underlying
              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
              * event will not fire since no edit actually occurred.
              * Fires after a change has been made to the field, but before the change is reflected in the underlying
              * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
              * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
              * event will not fire since no edit actually occurred.
-             * @param {Editor} this
-             * @param {Mixed} value The current field value
-             * @param {Mixed} startValue The original field value
+             * @param {Ext.Editor} this
+             * @param {Object} value The current field value
+             * @param {Object} startValue The original field value
              */
              */
-            "beforecomplete",
-            <div id="event-Ext.Editor-complete"></div>/**
-             * @event complete
+            'beforecomplete',
+<span id='Ext-Editor-event-complete'>            /**
+</span>             * @event complete
              * Fires after editing is complete and any changed value has been written to the underlying field.
              * Fires after editing is complete and any changed value has been written to the underlying field.
-             * @param {Editor} this
-             * @param {Mixed} value The current field value
-             * @param {Mixed} startValue The original field value
+             * @param {Ext.Editor} this
+             * @param {Object} value The current field value
+             * @param {Object} startValue The original field value
              */
              */
-            "complete",
-            <div id="event-Ext.Editor-canceledit"></div>/**
-             * @event canceledit
+            'complete',
+<span id='Ext-Editor-event-canceledit'>            /**
+</span>             * @event canceledit
              * Fires after editing has been canceled and the editor's value has been reset.
              * Fires after editing has been canceled and the editor's value has been reset.
-             * @param {Editor} this
-             * @param {Mixed} value The user-entered field value that was discarded
-             * @param {Mixed} startValue The original field value that was set back into the editor after cancel
+             * @param {Ext.Editor} this
+             * @param {Object} value The user-entered field value that was discarded
+             * @param {Object} startValue The original field value that was set back into the editor after cancel
              */
              */
-            "canceledit",
-            <div id="event-Ext.Editor-specialkey"></div>/**
-             * @event specialkey
+            'canceledit',
+<span id='Ext-Editor-event-specialkey'>            /**
+</span>             * @event specialkey
              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
              * {@link Ext.EventObject#getKey} to determine which key was pressed.
              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
              * {@link Ext.EventObject#getKey} to determine which key was pressed.
-             * @param {Ext.form.Field} this
-             * @param {Ext.EventObject} e The event object
+             * @param {Ext.Editor} this
+             * @param {Ext.form.field.Field} The field attached to this editor
+             * @param {Ext.EventObject} event The event object
              */
              */
-            "specialkey"
+            'specialkey'
         );
     },
 
     // private
         );
     },
 
     // private
-    onRender : function(ct, position){
-        this.el = new Ext.Layer({
-            shadow: this.shadow,
-            cls: "x-editor",
-            parentEl : ct,
-            shim : this.shim,
-            shadowOffset: this.shadowOffset || 4,
-            id: this.id,
-            constrain: this.constrain
-        });
-        if(this.zIndex){
-            this.el.setZIndex(this.zIndex);
-        }
-        this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
-        if(this.field.msgTarget != 'title'){
-            this.field.msgTarget = 'qtip';
-        }
-        this.field.inEditor = true;
-        this.mon(this.field, {
-            scope: this,
-            blur: this.onBlur,
-            specialkey: this.onSpecialKey
-        });
-        if(this.field.grow){
-            this.mon(this.field, "autosize", this.el.sync,  this.el, {delay:1});
-        }
-        this.field.render(this.el).show();
-        this.field.getEl().dom.name = '';
-        if(this.swallowKeys){
-            this.field.el.swallowEvent([
-                'keypress', // *** Opera
-                'keydown'   // *** all other browsers
-            ]);
-        }
+    onAutoSize: function(){
+        this.doComponentLayout();
     },
 
     // private
     },
 
     // private
-    onSpecialKey : function(field, e){
-        var key = e.getKey(),
-            complete = this.completeOnEnter && key == e.ENTER,
-            cancel = this.cancelOnEsc && key == e.ESC;
-        if(complete || cancel){
-            e.stopEvent();
-            if(complete){
-                this.completeEdit();
-            }else{
-                this.cancelEdit();
-            }
-            if(field.triggerBlur){
-                field.triggerBlur();
+    onRender : function(ct, position) {
+        var me = this,
+            field = me.field,
+            inputEl = field.inputEl;
+
+        me.callParent(arguments);
+
+        field.render(me.el);
+        //field.hide();
+        // Ensure the field doesn't get submitted as part of any form
+        if (inputEl) {
+            inputEl.dom.name = '';
+            if (me.swallowKeys) {
+                inputEl.swallowEvent([
+                    'keypress', // *** Opera
+                    'keydown'   // *** all other browsers
+                ]);
             }
         }
             }
         }
-        this.fireEvent('specialkey', field, e);
     },
 
     },
 
-    <div id="method-Ext.Editor-startEdit"></div>/**
-     * Starts the editing process and shows the editor.
-     * @param {Mixed} el The element to edit
+    // private
+    onSpecialKey : function(field, event) {
+        var me = this,
+            key = event.getKey(),
+            complete = me.completeOnEnter &amp;&amp; key == event.ENTER,
+            cancel = me.cancelOnEsc &amp;&amp; key == event.ESC;
+
+        if (complete || cancel) {
+            event.stopEvent();
+            // Must defer this slightly to prevent exiting edit mode before the field's own
+            // key nav can handle the enter key, e.g. selecting an item in a combobox list
+            Ext.defer(function() {
+                if (complete) {
+                    me.completeEdit();
+                } else {
+                    me.cancelEdit();
+                }
+                if (field.triggerBlur) {
+                    field.triggerBlur();
+                }
+            }, 10);
+        }
+
+        this.fireEvent('specialkey', this, field, event);
+    },
+
+<span id='Ext-Editor-method-startEdit'>    /**
+</span>     * Starts the editing process and shows the editor.
+     * @param {String/HTMLElement/Ext.Element} el The element to edit
      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
       * to the innerHTML of el.
      */
      * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
       * to the innerHTML of el.
      */
-    startEdit : function(el, value){
-        if(this.editing){
-            this.completeEdit();
-        }
-        this.boundEl = Ext.get(el);
-        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
-        if(!this.rendered){
-            this.render(this.parentEl || document.body);
-        }
-        if(this.fireEvent("beforestartedit", this, this.boundEl, v) !== false){
-            this.startValue = v;
-            this.field.reset();
-            this.field.setValue(v);
-            this.realign(true);
-            this.editing = true;
-            this.show();
-        }
-    },
+    startEdit : function(el, value) {
+        var me = this,
+            field = me.field;
 
 
-    // private
-    doAutoSize : function(){
-        if(this.autoSize){
-            var sz = this.boundEl.getSize(),
-                fs = this.field.getSize();
-
-            switch(this.autoSize){
-                case "width":
-                    this.setSize(sz.width, fs.height);
-                    break;
-                case "height":
-                    this.setSize(fs.width, sz.height);
-                    break;
-                case "none":
-                    this.setSize(fs.width, fs.height);
-                    break;
-                default:
-                    this.setSize(sz.width, sz.height);
-            }
+        me.completeEdit();
+        me.boundEl = Ext.get(el);
+        value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;
+
+        if (!me.rendered) {
+            me.render(me.parentEl || document.body);
         }
         }
-    },
 
 
-    <div id="method-Ext.Editor-setSize"></div>/**
-     * Sets the height and width of this editor.
-     * @param {Number} width The new width
-     * @param {Number} height The new height
-     */
-    setSize : function(w, h){
-        delete this.field.lastSize;
-        this.field.setSize(w, h);
-        if(this.el){
-            if(Ext.isGecko2 || Ext.isOpera){
-                // prevent layer scrollbars
-                this.el.setSize(w, h);
+        if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
+            me.startValue = value;
+            me.show();
+            field.reset();
+            field.setValue(value);
+            me.realign(true);
+            field.focus(false, 10);
+            if (field.autoSize) {
+                field.autoSize();
             }
             }
-            this.el.sync();
+            me.editing = true;
         }
     },
 
         }
     },
 
-    <div id="method-Ext.Editor-realign"></div>/**
-     * Realigns the editor to the bound field based on the current alignment config value.
+<span id='Ext-Editor-method-realign'>    /**
+</span>     * Realigns the editor to the bound field based on the current alignment config value.
      * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
      */
      * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
      */
-    realign : function(autoSize){
-        if(autoSize === true){
-            this.doAutoSize();
+    realign : function(autoSize) {
+        var me = this;
+        if (autoSize === true) {
+            me.doComponentLayout();
         }
         }
-        this.el.alignTo(this.boundEl, this.alignment, this.offsets);
+        me.alignTo(me.boundEl, me.alignment, me.offsets);
     },
 
     },
 
-    <div id="method-Ext.Editor-completeEdit"></div>/**
-     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
-     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
+<span id='Ext-Editor-method-completeEdit'>    /**
+</span>     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
+     * @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after edit
      */
      */
-    completeEdit : function(remainVisible){
-        if(!this.editing){
+    completeEdit : function(remainVisible) {
+        var me = this,
+            field = me.field,
+            value;
+
+        if (!me.editing) {
             return;
         }
             return;
         }
+
         // Assert combo values first
         // Assert combo values first
-        if (this.field.assertValue) {
-            this.field.assertValue();
+        if (field.assertValue) {
+            field.assertValue();
         }
         }
-        var v = this.getValue();
-        if(!this.field.isValid()){
-            if(this.revertInvalid !== false){
-                this.cancelEdit(remainVisible);
+
+        value = me.getValue();
+        if (!field.isValid()) {
+            if (me.revertInvalid !== false) {
+                me.cancelEdit(remainVisible);
             }
             return;
         }
             }
             return;
         }
-        if(String(v) === String(this.startValue) && this.ignoreNoChange){
-            this.hideEdit(remainVisible);
+
+        if (String(value) === String(me.startValue) &amp;&amp; me.ignoreNoChange) {
+            me.hideEdit(remainVisible);
             return;
         }
             return;
         }
-        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
-            v = this.getValue();
-            if(this.updateEl && this.boundEl){
-                this.boundEl.update(v);
+
+        if (me.fireEvent('beforecomplete', me, value, me.startValue) !== false) {
+            // Grab the value again, may have changed in beforecomplete
+            value = me.getValue();
+            if (me.updateEl &amp;&amp; me.boundEl) {
+                me.boundEl.update(value);
             }
             }
-            this.hideEdit(remainVisible);
-            this.fireEvent("complete", this, v, this.startValue);
+            me.hideEdit(remainVisible);
+            me.fireEvent('complete', me, value, me.startValue);
         }
     },
 
     // private
         }
     },
 
     // private
-    onShow : function(){
-        this.el.show();
-        if(this.hideEl !== false){
-            this.boundEl.hide();
+    onShow : function() {
+        var me = this;
+
+        me.callParent(arguments);
+        if (me.hideEl !== false) {
+            me.boundEl.hide();
         }
         }
-        this.field.show().focus(false, true);
-        this.fireEvent("startedit", this.boundEl, this.startValue);
+        me.fireEvent(&quot;startedit&quot;, me.boundEl, me.startValue);
     },
 
     },
 
-    <div id="method-Ext.Editor-cancelEdit"></div>/**
-     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
+<span id='Ext-Editor-method-cancelEdit'>    /**
+</span>     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
      * reverted to the original starting value.
      * reverted to the original starting value.
-     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
-     * cancel (defaults to false)
+     * @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after cancel
      */
      */
-    cancelEdit : function(remainVisible){
-        if(this.editing){
-            var v = this.getValue();
-            this.setValue(this.startValue);
-            this.hideEdit(remainVisible);
-            this.fireEvent("canceledit", this, v, this.startValue);
+    cancelEdit : function(remainVisible) {
+        var me = this,
+            startValue = me.startValue,
+            value;
+
+        if (me.editing) {
+            value = me.getValue();
+            me.setValue(startValue);
+            me.hideEdit(remainVisible);
+            me.fireEvent('canceledit', me, value, startValue);
         }
     },
 
     // private
         }
     },
 
     // private
-    hideEdit: function(remainVisible){
-        if(remainVisible !== true){
+    hideEdit: function(remainVisible) {
+        if (remainVisible !== true) {
             this.editing = false;
             this.hide();
         }
     },
 
     // private
             this.editing = false;
             this.hide();
         }
     },
 
     // private
-    onBlur : function(){
+    onBlur : function() {
+        var me = this;
+
         // selectSameEditor flag allows the same editor to be started without onBlur firing on itself
         // selectSameEditor flag allows the same editor to be started without onBlur firing on itself
-        if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){
-            this.completeEdit();
+        if(me.allowBlur === true &amp;&amp; me.editing &amp;&amp; me.selectSameEditor !== true) {
+            me.completeEdit();
         }
     },
 
     // private
         }
     },
 
     // private
-    onHide : function(){
-        if(this.editing){
-            this.completeEdit();
+    onHide : function() {
+        var me = this,
+            field = me.field;
+
+        if (me.editing) {
+            me.completeEdit();
             return;
         }
             return;
         }
-        this.field.blur();
-        if(this.field.collapse){
-            this.field.collapse();
+        field.blur();
+        if (field.collapse) {
+            field.collapse();
         }
         }
-        this.el.hide();
-        if(this.hideEl !== false){
-            this.boundEl.show();
+
+        //field.hide();
+        if (me.hideEl !== false) {
+            me.boundEl.show();
         }
         }
+        me.callParent(arguments);
     },
 
     },
 
-    <div id="method-Ext.Editor-setValue"></div>/**
-     * Sets the data value of the editor
-     * @param {Mixed} value Any valid value supported by the underlying field
+<span id='Ext-Editor-method-setValue'>    /**
+</span>     * Sets the data value of the editor
+     * @param {Object} value Any valid value supported by the underlying field
      */
      */
-    setValue : function(v){
-        this.field.setValue(v);
+    setValue : function(value) {
+        this.field.setValue(value);
     },
 
     },
 
-    <div id="method-Ext.Editor-getValue"></div>/**
-     * Gets the data value of the editor
-     * @return {Mixed} The data value
+<span id='Ext-Editor-method-getValue'>    /**
+</span>     * Gets the data value of the editor
+     * @return {Object} The data value
      */
      */
-    getValue : function(){
+    getValue : function() {
         return this.field.getValue();
     },
 
         return this.field.getValue();
     },
 
-    beforeDestroy : function(){
-        Ext.destroyMembers(this, 'field');
+    beforeDestroy : function() {
+        var me = this;
 
 
-        delete this.parentEl;
-        delete this.boundEl;
+        Ext.destroy(me.field);
+        delete me.field;
+        delete me.parentEl;
+        delete me.boundEl;
+
+        me.callParent(arguments);
     }
     }
-});
-Ext.reg('editor', Ext.Editor);
-</pre>    
+});</pre>
 </body>
 </body>
-</html>
\ No newline at end of file
+</html>
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.