lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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>
  <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>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-Editor'>/**
</span> * 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:
 *
 * - {@link #completeOnEnter}
 * - {@link #cancelOnEsc}
 * - {@link #swallowKeys}
 *
 * It also has options for how to use the value once the editor has been activated:
 *
 * - {@link #revertInvalid}
 * - {@link #ignoreNoChange}
 * - {@link #updateEl}
 *
 * Sample usage:
 *
 *     var editor = new Ext.Editor({
 *         updateEl: true, // update the innerHTML of the bound element when editing completes
 *         field: {
 *             xtype: 'textfield'
 *         }
 *     });
 *     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.
 *
 * {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
 *
 */
Ext.define('Ext.Editor', {

    /* Begin Definitions */

    extend: 'Ext.container.Container',

    alias: 'widget.editor',

    requires: ['Ext.layout.container.Editor'],

    /* End Definitions */

   layout: 'editor',

<span id='Ext-Editor-cfg-field'>    /**
</span>    * @cfg {Ext.form.field.Field} field
    * The Field object (or descendant) or config object for field
    */

<span id='Ext-Editor-cfg-allowBlur'>    /**
</span>     * @cfg {Boolean} allowBlur
     * True to {@link #completeEdit complete the editing process} if in edit mode when the
     * field is blurred.
     */
    allowBlur: true,

<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:
     *
     *     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
     *     }
     */

<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
     * validation fails
     */
    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
     * the value has not changed.  Applies only to string values - edits for other data types
     * will never be ignored.
     */

<span id='Ext-Editor-cfg-hideEl'>    /**
</span>     * @cfg {Boolean} [hideEl=true]
     * False to keep the bound element visible while the editor is displayed
     */

<span id='Ext-Editor-cfg-value'>    /**
</span>     * @cfg {Object} value
     * The data value of the underlying field
     */
    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?',

<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],

<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',

<span id='Ext-Editor-cfg-constrain'>    /**
</span>     * @cfg {Boolean} constrain
     * True to constrain the editor to the viewport
     */
    constrain : false,

<span id='Ext-Editor-cfg-swallowKeys'>    /**
</span>     * @cfg {Boolean} swallowKeys
     * Handle the keydown/keypress events so they don't propagate
     */
    swallowKeys : true,

<span id='Ext-Editor-cfg-completeOnEnter'>    /**
</span>     * @cfg {Boolean} completeOnEnter
     * True to complete the edit when the enter key is pressed.
     */
    completeOnEnter : true,

<span id='Ext-Editor-cfg-cancelOnEsc'>    /**
</span>     * @cfg {Boolean} cancelOnEsc
     * True to cancel the edit when the escape key is pressed.
     */
    cancelOnEsc : true,

<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,

<span id='Ext-Editor-cfg-parentEl'>    /**
</span>     * @cfg {String/HTMLElement/Ext.Element} [parentEl=document.body]
     * An element to render to.
     */

    // 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.onFieldBlur,
                // 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.onFieldAutosize,  me, {delay: 1});
        }
        me.floating = {
            constrain: me.constrain
        };
        me.items = field;

        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.
             * @param {Ext.Editor} this
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Object} value The field value being set
             */
            'beforestartedit',

<span id='Ext-Editor-event-startedit'>            /**
</span>             * @event startedit
             * Fires when this editor is displayed
             * @param {Ext.Editor} this
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Object} value The starting field value
             */
            '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.
             * @param {Ext.Editor} this
             * @param {Object} value The current field value
             * @param {Object} startValue The original field value
             */
            '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.
             * @param {Ext.Editor} this
             * @param {Object} value The current field value
             * @param {Object} startValue The original field value
             */
            'complete',
<span id='Ext-Editor-event-canceledit'>            /**
</span>             * @event canceledit
             * Fires after editing has been canceled and the editor's value has been reset.
             * @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',
<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.
             * @param {Ext.Editor} this
             * @param {Ext.form.field.Field} field The field attached to this editor
             * @param {Ext.EventObject} event The event object
             */
            'specialkey'
        );
    },

    // private
    onFieldAutosize: function(){
        this.updateLayout();
    },

    // private
    afterRender : function(ct, position) {
        var me = this,
            field = me.field,
            inputEl = field.inputEl;

        me.callParent(arguments);

        // 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
                ]);
            }
        }
    },

    // 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(event);
                }
            }, 10);
        }

        me.fireEvent('specialkey', me, 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.
     */
    startEdit : function(el, value) {
        var me = this,
            field = me.field;

        me.completeEdit();
        me.boundEl = Ext.get(el);
        value = Ext.isDefined(value) ? value : Ext.String.trim(me.boundEl.dom.innerText || me.boundEl.dom.innerHTML);

        if (!me.rendered) {
            me.render(me.parentEl || document.body);
        }

        if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
            me.startValue = value;
            me.show();
            // temporarily suspend events on field to prevent the &quot;change&quot; event from firing when reset() and setValue() are called
            field.suspendEvents();
            field.reset();
            field.setValue(value);
            field.resumeEvents();
            me.realign(true);
            field.focus(false, 10);
            if (field.autoSize) {
                field.autoSize();
            }
            me.editing = true;
        }
    },

<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.
     */
    realign : function(autoSize) {
        var me = this;
        if (autoSize === true) {
            me.updateLayout();
        }
        me.alignTo(me.boundEl, me.alignment, me.offsets);
    },

<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) {
        var me = this,
            field = me.field,
            value;

        if (!me.editing) {
            return;
        }

        // Assert combo values first
        if (field.assertValue) {
            field.assertValue();
        }

        value = me.getValue();
        if (!field.isValid()) {
            if (me.revertInvalid !== false) {
                me.cancelEdit(remainVisible);
            }
            return;
        }

        if (String(value) === String(me.startValue) &amp;&amp; me.ignoreNoChange) {
            me.hideEdit(remainVisible);
            return;
        }

        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);
            }
            me.hideEdit(remainVisible);
            me.fireEvent('complete', me, value, me.startValue);
        }
    },

    // private
    onShow : function() {
        var me = this;

        me.callParent(arguments);
        if (me.hideEl !== false) {
            me.boundEl.hide();
        }
        me.fireEvent('startedit', me, me.boundEl, me.startValue);
    },

<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.
     * @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after cancel
     */
    cancelEdit : function(remainVisible) {
        var me = this,
            startValue = me.startValue,
            field = me.field,
            value;

        if (me.editing) {
            value = me.getValue();
            // temporarily suspend events on field to prevent the &quot;change&quot; event from firing when setValue() is called
            field.suspendEvents();
            me.setValue(startValue);
            field.resumeEvents();
            me.hideEdit(remainVisible);
            me.fireEvent('canceledit', me, value, startValue);
        }
    },

    // private
    hideEdit: function(remainVisible) {
        if (remainVisible !== true) {
            this.editing = false;
            this.hide();
        }
    },

    // private
    onFieldBlur : function(field, e) {
        var me = this,
            target;

        // selectSameEditor flag allows the same editor to be started without onFieldBlur firing on itself
        if(me.allowBlur === true &amp;&amp; me.editing &amp;&amp; me.selectSameEditor !== true) {
            me.completeEdit();
        }

        // If the target of the event was focusable, prevent reacquisition of focus by editor owner
        if (e &amp;&amp; Ext.fly(target = e.getTarget()).focusable()) {
            target.focus();
        }
    },

    // private
    onHide : function() {
        var me = this,
            field = me.field;

        if (me.editing) {
            me.completeEdit();
            return;
        }
        if (field.hasFocus) {
            field.blur();
        }
        if (field.collapse) {
            field.collapse();
        }

        //field.hide();
        if (me.hideEl !== false) {
            me.boundEl.show();
        }
        me.callParent(arguments);
    },

<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(value) {
        this.field.setValue(value);
    },

<span id='Ext-Editor-method-getValue'>    /**
</span>     * Gets the data value of the editor
     * @return {Object} The data value
     */
    getValue : function() {
        return this.field.getValue();
    },

    beforeDestroy : function() {
        var me = this;

        Ext.destroy(me.field);
        delete me.field;
        delete me.parentEl;
        delete me.boundEl;

        me.callParent(arguments);
    }
});
</pre>
</body>
</html>