lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!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-form-field-Field'>/**
</span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
 *
 * This mixin provides a common interface for the logical behavior and state of form fields, including:
 *
 * - Getter and setter methods for field values
 * - Events and methods for tracking value and validity changes
 * - Methods for triggering validation
 *
 * **NOTE**: When implementing custom fields, it is most likely that you will want to extend the {@link Ext.form.field.Base}
 * component class rather than using this mixin directly, as BaseField contains additional logic for generating an
 * actual DOM complete with {@link Ext.form.Labelable label and error message} display and a form input field,
 * plus methods that bind the Field value getters and setters to the input field's value.
 *
 * If you do want to implement this mixin directly and don't want to extend {@link Ext.form.field.Base}, then
 * you will most likely want to override the following methods with custom implementations: {@link #getValue},
 * {@link #setValue}, and {@link #getErrors}. Other methods may be overridden as needed but their base
 * implementations should be sufficient for common cases. You will also need to make sure that {@link #initField}
 * is called during the component's initialization.
 */
Ext.define('Ext.form.field.Field', {
<span id='Ext-form-field-Field-property-isFormField'>    /**
</span>     * @property {Boolean} isFormField
     * Flag denoting that this component is a Field. Always true.
     */
    isFormField : true,

<span id='Ext-form-field-Field-cfg-value'>    /**
</span>     * @cfg {Object} value
     * A value to initialize this field with.
     */

<span id='Ext-form-field-Field-cfg-name'>    /**
</span>     * @cfg {String} name
     * The name of the field. By default this is used as the parameter name when including the
     * {@link #getSubmitData field value} in a {@link Ext.form.Basic#submit form submit()}. To prevent the field from
     * being included in the form submit, set {@link #submitValue} to false.
     */

<span id='Ext-form-field-Field-cfg-disabled'>    /**
</span>     * @cfg {Boolean} disabled
     * True to disable the field. Disabled Fields will not be {@link Ext.form.Basic#submit submitted}.
     */
    disabled : false,

<span id='Ext-form-field-Field-cfg-submitValue'>    /**
</span>     * @cfg {Boolean} submitValue
     * Setting this to false will prevent the field from being {@link Ext.form.Basic#submit submitted} even when it is
     * not disabled.
     */
    submitValue: true,

<span id='Ext-form-field-Field-cfg-validateOnChange'>    /**
</span>     * @cfg {Boolean} validateOnChange
     * Specifies whether this field should be validated immediately whenever a change in its value is detected.
     * If the validation results in a change in the field's validity, a {@link #validitychange} event will be
     * fired. This allows the field to show feedback about the validity of its contents immediately as the user is
     * typing.
     *
     * When set to false, feedback will not be immediate. However the form will still be validated before submitting if
     * the clientValidation option to {@link Ext.form.Basic#doAction} is enabled, or if the field or form are validated
     * manually.
     *
     * See also {@link Ext.form.field.Base#checkChangeEvents} for controlling how changes to the field's value are
     * detected.
     */
    validateOnChange: true,

<span id='Ext-form-field-Field-property-suspendCheckChange'>    /**
</span>     * @private
     */
    suspendCheckChange: 0,

<span id='Ext-form-field-Field-method-initField'>    /**
</span>     * Initializes this Field mixin on the current instance. Components using this mixin should call this method during
     * their own initialization process.
     */
    initField: function() {
        this.addEvents(
<span id='Ext-form-field-Field-event-change'>            /**
</span>             * @event change
             * Fires when the value of a field is changed via the {@link #setValue} method.
             * @param {Ext.form.field.Field} this
             * @param {Object} newValue The new value
             * @param {Object} oldValue The original value
             */
            'change',
<span id='Ext-form-field-Field-event-validitychange'>            /**
</span>             * @event validitychange
             * Fires when a change in the field's validity is detected.
             * @param {Ext.form.field.Field} this
             * @param {Boolean} isValid Whether or not the field is now valid
             */
            'validitychange',
<span id='Ext-form-field-Field-event-dirtychange'>            /**
</span>             * @event dirtychange
             * Fires when a change in the field's {@link #isDirty} state is detected.
             * @param {Ext.form.field.Field} this
             * @param {Boolean} isDirty Whether or not the field is now dirty
             */
            'dirtychange'
        );

        this.initValue();
    },

<span id='Ext-form-field-Field-method-initValue'>    /**
</span>     * Initializes the field's value based on the initial config.
     */
    initValue: function() {
        var me = this;

        me.value = me.transformOriginalValue(me.value);
<span id='Ext-form-field-Field-property-originalValue'>        /**
</span>         * @property {Object} originalValue
         * The original value of the field as configured in the {@link #value} configuration, or as loaded by the last
         * form load operation if the form's {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} setting is `true`.
         */
        me.originalValue = me.lastValue = me.value;

        // Set the initial value - prevent validation on initial set
        me.suspendCheckChange++;
        me.setValue(me.value);
        me.suspendCheckChange--;
    },
    
<span id='Ext-form-field-Field-method-transformOriginalValue'>    /**
</span>     * Allows for any necessary modifications before the original
     * value is set
     * @protected
     * @param {Object} value The initial value
     * @return {Object} The modified initial value
     */
    transformOriginalValue: function(value){
        return value;
    },

<span id='Ext-form-field-Field-method-getName'>    /**
</span>     * Returns the {@link Ext.form.field.Field#name name} attribute of the field. This is used as the parameter name
     * when including the field value in a {@link Ext.form.Basic#submit form submit()}.
     * @return {String} name The field {@link Ext.form.field.Field#name name}
     */
    getName: function() {
        return this.name;
    },

<span id='Ext-form-field-Field-method-getValue'>    /**
</span>     * Returns the current data value of the field. The type of value returned is particular to the type of the
     * particular field (e.g. a Date object for {@link Ext.form.field.Date}).
     * @return {Object} value The field value
     */
    getValue: function() {
        return this.value;
    },

<span id='Ext-form-field-Field-method-setValue'>    /**
</span>     * Sets a data value into the field and runs the change detection and validation.
     * @param {Object} value The value to set
     * @return {Ext.form.field.Field} this
     */
    setValue: function(value) {
        var me = this;
        me.value = value;
        me.checkChange();
        return me;
    },

<span id='Ext-form-field-Field-method-isEqual'>    /**
</span>     * Returns whether two field {@link #getValue values} are logically equal. Field implementations may override this
     * to provide custom comparison logic appropriate for the particular field's data type.
     * @param {Object} value1 The first value to compare
     * @param {Object} value2 The second value to compare
     * @return {Boolean} True if the values are equal, false if inequal.
     */
    isEqual: function(value1, value2) {
        return String(value1) === String(value2);
    },

<span id='Ext-form-field-Field-method-isEqualAsString'>    /**
</span>     * Returns whether two values are logically equal.
     * Similar to {@link #isEqual}, however null or undefined values will be treated as empty strings.
     * @private
     * @param {Object} value1 The first value to compare
     * @param {Object} value2 The second value to compare
     * @return {Boolean} True if the values are equal, false if inequal.
     */
    isEqualAsString: function(value1, value2){
        return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
    },

<span id='Ext-form-field-Field-method-getSubmitData'>    /**
</span>     * Returns the parameter(s) that would be included in a standard form submit for this field. Typically this will be
     * an object with a single name-value pair, the name being this field's {@link #getName name} and the value being
     * its current stringified value. More advanced field implementations may return more than one name-value pair.
     *
     * Note that the values returned from this method are not guaranteed to have been successfully {@link #validate
     * validated}.
     *
     * @return {Object} A mapping of submit parameter names to values; each value should be a string, or an array of
     * strings if that particular name has multiple values. It can also return null if there are no parameters to be
     * submitted.
     */
    getSubmitData: function() {
        var me = this,
            data = null;
        if (!me.disabled &amp;&amp; me.submitValue &amp;&amp; !me.isFileUpload()) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        return data;
    },

<span id='Ext-form-field-Field-method-getModelData'>    /**
</span>     * Returns the value(s) that should be saved to the {@link Ext.data.Model} instance for this field, when {@link
     * Ext.form.Basic#updateRecord} is called. Typically this will be an object with a single name-value pair, the name
     * being this field's {@link #getName name} and the value being its current data value. More advanced field
     * implementations may return more than one name-value pair. The returned values will be saved to the corresponding
     * field names in the Model.
     *
     * Note that the values returned from this method are not guaranteed to have been successfully {@link #validate
     * validated}.
     *
     * @return {Object} A mapping of submit parameter names to values; each value should be a string, or an array of
     * strings if that particular name has multiple values. It can also return null if there are no parameters to be
     * submitted.
     */
    getModelData: function() {
        var me = this,
            data = null;
        if (!me.disabled &amp;&amp; !me.isFileUpload()) {
            data = {};
            data[me.getName()] = me.getValue();
        }
        return data;
    },

<span id='Ext-form-field-Field-method-reset'>    /**
</span>     * Resets the current field value to the originally loaded value and clears any validation messages. See {@link
     * Ext.form.Basic}.{@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}
     */
    reset : function(){
        var me = this;

        me.beforeReset();
        me.setValue(me.originalValue);
        me.clearInvalid();
        // delete here so we reset back to the original state
        delete me.wasValid;
    },
    
<span id='Ext-form-field-Field-method-beforeReset'>    /**
</span>     * Template method before a field is reset.
     * @protected
     */
    beforeReset: Ext.emptyFn,

<span id='Ext-form-field-Field-method-resetOriginalValue'>    /**
</span>     * Resets the field's {@link #originalValue} property so it matches the current {@link #getValue value}. This is
     * called by {@link Ext.form.Basic}.{@link Ext.form.Basic#setValues setValues} if the form's
     * {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} property is set to true.
     */
    resetOriginalValue: function() {
        this.originalValue = this.getValue();
        this.checkDirty();
    },

<span id='Ext-form-field-Field-method-checkChange'>    /**
</span>     * Checks whether the value of the field has changed since the last time it was checked.
     * If the value has changed, it:
     *
     * 1. Fires the {@link #change change event},
     * 2. Performs validation if the {@link #validateOnChange} config is enabled, firing the
     *    {@link #validitychange validitychange event} if the validity has changed, and
     * 3. Checks the {@link #isDirty dirty state} of the field and fires the {@link #dirtychange dirtychange event}
     *    if it has changed.
     */
    checkChange: function() {
        if (!this.suspendCheckChange) {
            var me = this,
                newVal = me.getValue(),
                oldVal = me.lastValue;
            if (!me.isEqual(newVal, oldVal) &amp;&amp; !me.isDestroyed) {
                me.lastValue = newVal;
                me.fireEvent('change', me, newVal, oldVal);
                me.onChange(newVal, oldVal);
            }
        }
    },

<span id='Ext-form-field-Field-method-onChange'>    /**
</span>     * @private
     * Called when the field's value changes. Performs validation if the {@link #validateOnChange}
     * config is enabled, and invokes the dirty check.
     */
    onChange: function(newVal, oldVal) {
        if (this.validateOnChange) {
            this.validate();
        }
        this.checkDirty();
    },

<span id='Ext-form-field-Field-method-isDirty'>    /**
</span>     * Returns true if the value of this Field has been changed from its {@link #originalValue}.
     * Will always return false if the field is disabled.
     *
     * Note that if the owning {@link Ext.form.Basic form} was configured with
     * {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} then the {@link #originalValue} is updated when
     * the values are loaded by {@link Ext.form.Basic}.{@link Ext.form.Basic#setValues setValues}.
     * @return {Boolean} True if this field has been changed from its original value (and is not disabled),
     * false otherwise.
     */
    isDirty : function() {
        var me = this;
        return !me.disabled &amp;&amp; !me.isEqual(me.getValue(), me.originalValue);
    },

<span id='Ext-form-field-Field-method-checkDirty'>    /**
</span>     * Checks the {@link #isDirty} state of the field and if it has changed since the last time it was checked,
     * fires the {@link #dirtychange} event.
     */
    checkDirty: function() {
        var me = this,
            isDirty = me.isDirty();
        if (isDirty !== me.wasDirty) {
            me.fireEvent('dirtychange', me, isDirty);
            me.onDirtyChange(isDirty);
            me.wasDirty = isDirty;
        }
    },

<span id='Ext-form-field-Field-method-onDirtyChange'>    /**
</span>     * @private Called when the field's dirty state changes.
     * @param {Boolean} isDirty
     */
    onDirtyChange: Ext.emptyFn,

<span id='Ext-form-field-Field-method-getErrors'>    /**
</span>     * Runs this field's validators and returns an array of error messages for any validation failures. This is called
     * internally during validation and would not usually need to be used manually.
     *
     * Each subclass should override or augment the return value to provide their own errors.
     *
     * @param {Object} value The value to get errors for (defaults to the current field value)
     * @return {String[]} All error messages for this field; an empty Array if none.
     */
    getErrors: function(value) {
        return [];
    },

<span id='Ext-form-field-Field-method-isValid'>    /**
</span>     * Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
     * value. The {@link #validitychange} event will not be fired; use {@link #validate} instead if you want the event
     * to fire. **Note**: {@link #disabled} fields are always treated as valid.
     *
     * Implementations are encouraged to ensure that this method does not have side-effects such as triggering error
     * message display.
     *
     * @return {Boolean} True if the value is valid, else false
     */
    isValid : function() {
        var me = this;
        return me.disabled || Ext.isEmpty(me.getErrors());
    },

<span id='Ext-form-field-Field-method-validate'>    /**
</span>     * Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
     * value, and fires the {@link #validitychange} event if the field's validity has changed since the last validation.
     * **Note**: {@link #disabled} fields are always treated as valid.
     *
     * Custom implementations of this method are allowed to have side-effects such as triggering error message display.
     * To validate without side-effects, use {@link #isValid}.
     *
     * @return {Boolean} True if the value is valid, else false
     */
    validate : function() {
        var me = this,
            isValid = me.isValid();
        if (isValid !== me.wasValid) {
            me.wasValid = isValid;
            me.fireEvent('validitychange', me, isValid);
        }
        return isValid;
    },

<span id='Ext-form-field-Field-method-batchChanges'>    /**
</span>     * A utility for grouping a set of modifications which may trigger value changes into a single transaction, to
     * prevent excessive firing of {@link #change} events. This is useful for instance if the field has sub-fields which
     * are being updated as a group; you don't want the container field to check its own changed state for each subfield
     * change.
     * @param {Object} fn A function containing the transaction code
     */
    batchChanges: function(fn) {
        try {
            this.suspendCheckChange++;
            fn();
        } catch(e){
            throw e;
        } finally {
            this.suspendCheckChange--;
        }
        this.checkChange();
    },

<span id='Ext-form-field-Field-method-isFileUpload'>    /**
</span>     * Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for
     * {@link Ext.form.Basic#submit submitting the form} via AJAX. See {@link Ext.form.Basic#hasUpload} for details. If
     * this returns true, the {@link #extractFileInput} method must also be implemented to return the corresponding file
     * input element.
     * @return {Boolean}
     */
    isFileUpload: function() {
        return false;
    },

<span id='Ext-form-field-Field-method-extractFileInput'>    /**
</span>     * Only relevant if the instance's {@link #isFileUpload} method returns true. Returns a reference to the file input
     * DOM element holding the user's selected file. The input will be appended into the submission form and will not be
     * returned, so this method should also create a replacement.
     * @return {HTMLElement}
     */
    extractFileInput: function() {
        return null;
    },

<span id='Ext-form-field-Field-method-markInvalid'>    /**
</span>     * @method markInvalid
     * Associate one or more error messages with this field. Components using this mixin should implement this method to
     * update the component's rendering to display the messages.
     *
     * **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `false`
     * if the value does _pass_ validation. So simply marking a Field as invalid will not prevent submission of forms
     * submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
     *
     * @param {String/String[]} errors The error message(s) for the field.
     */
    markInvalid: Ext.emptyFn,

<span id='Ext-form-field-Field-method-clearInvalid'>    /**
</span>     * @method clearInvalid
     * Clear any invalid styles/messages for this field. Components using this mixin should implement this method to
     * update the components rendering to clear any existing messages.
     *
     * **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `true`
     * if the value does not _pass_ validation. So simply clearing a field's errors will not necessarily allow
     * submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
     */
    clearInvalid: Ext.emptyFn

});
</pre>
</body>
</html>