[extjs.git] / extjs / classic / classic / src / form / field / Text.js

/**\r
 * A basic text field.  Can be used as a direct replacement for traditional text inputs,\r
 * or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}\r
 * and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).\r
 *\r
 * # Validation\r
 *\r
 * The Text field has a useful set of validations built in:\r
 *\r
 * - {@link #allowBlank} for making the field required\r
 * - {@link #minLength} for requiring a minimum value length\r
 * - {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it\r
 *   as the `maxlength` attribute on the input element)\r
 * - {@link #regex} to specify a custom regular expression for validation\r
 *\r
 * In addition, custom validations may be added:\r
 *\r
 * - {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain\r
 *   custom validation logic\r
 * - {@link #validator} allows a custom arbitrary function to be called during validation\r
 *\r
 * The details around how and when each of these validation options get used are described in the\r
 * documentation for {@link #getErrors}.\r
 *\r
 * By default, the field value is checked for validity immediately while the user is typing in the\r
 * field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and\r
 * {@link #checkChangeBuffer} configurations. Also see the details on Form Validation in the\r
 * {@link Ext.form.Panel} class documentation.\r
 *\r
 * # Masking and Character Stripping\r
 *\r
 * Text fields can be configured with custom regular expressions to be applied to entered values before\r
 * validation: see {@link #maskRe} and {@link #stripCharsRe} for details.\r
 *\r
 * # Example usage\r
 *\r
 *     @example\r
 *     Ext.create('Ext.form.Panel', {\r
 *         title: 'Contact Info',\r
 *         width: 300,\r
 *         bodyPadding: 10,\r
 *         renderTo: Ext.getBody(),\r
 *         items: [{\r
 *             xtype: 'textfield',\r
 *             name: 'name',\r
 *             fieldLabel: 'Name',\r
 *             allowBlank: false  // requires a non-empty value\r
 *         }, {\r
 *             xtype: 'textfield',\r
 *             name: 'email',\r
 *             fieldLabel: 'Email Address',\r
 *             vtype: 'email'  // requires value to be a valid email address format\r
 *         }]\r
 *     });\r
 *\r
 * # Custom Subclasses\r
 *\r
 * This class can be extended to provide additional functionality. The example below demonstrates creating\r
 * a custom search field that uses the HTML5 search input type.\r
 *\r
 *     @example\r
 *     // A simple subclass of Base that creates a HTML5 search field. Redirects to the\r
 *     // searchUrl when the Enter key is pressed.222\r
 *     Ext.define('Ext.form.SearchField', {\r
 *         extend: 'Ext.form.field.Text',\r
 *         alias: 'widget.searchfield',\r
 *     \r
 *         inputType: 'search',\r
 *     \r
 *         // Config defining the search URL\r
 *         searchUrl: 'http://www.google.com/search?q={0}',\r
 *     \r
 *         // Add specialkey listener\r
 *         initComponent: function() {\r
 *             this.callParent();\r
 *             this.on('specialkey', this.checkEnterKey, this);\r
 *         },\r
 *     \r
 *         // Handle enter key presses, execute the search if the field has a value\r
 *         checkEnterKey: function(field, e) {\r
 *             var value = this.getValue();\r
 *             if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {\r
 *                 location.href = Ext.String.format(this.searchUrl, value);\r
 *             }\r
 *         }\r
 *     });\r
 *     \r
 *     Ext.create('Ext.form.Panel', {\r
 *         title: 'Base Example',\r
 *         bodyPadding: 5,\r
 *         width: 250,\r
 *     \r
 *         // Fields will be arranged vertically, stretched to full width\r
 *         layout: 'anchor',\r
 *         defaults: {\r
 *             anchor: '100%'\r
 *         },\r
 *         items: [{\r
 *             xtype: 'searchfield',\r
 *             fieldLabel: 'Search',\r
 *             name: 'query'\r
 *         }],\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 */\r
Ext.define('Ext.form.field.Text', {\r
    extend:'Ext.form.field.Base',\r
    alias: 'widget.textfield',\r
    requires: [\r
        'Ext.form.field.VTypes',\r
        'Ext.form.trigger.Trigger',\r
        'Ext.util.TextMetrics'\r
    ],\r
    alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],\r
\r
    config: {\r
        /**\r
         * @cfg {Boolean} hideTrigger\r
         * `true` to hide all triggers\r
         */\r
        hideTrigger: false,\r
\r
        // @cmd-auto-dependency {aliasPrefix: "trigger.", isKeyedObject: true}\r
        /**\r
         * @cfg {Object} triggers\r
         * {@link Ext.form.trigger.Trigger Triggers} to use in this field.  The keys in\r
         * this object are unique identifiers for the triggers. The values in this object\r
         * are {@link Ext.form.trigger.Trigger Trigger} configuration objects.\r
         *\r
         *     Ext.create('Ext.form.field.Text', {\r
         *         renderTo: document.body,\r
         *         fieldLabel: 'My Custom Field',\r
         *         triggers: {\r
         *             foo: {\r
         *                 cls: 'my-foo-trigger',\r
         *                 handler: function() {\r
         *                     console.log('foo trigger clicked');\r
         *                 }\r
         *             },\r
         *             bar: {\r
         *                 cls: 'my-bar-trigger',\r
         *                 handler: function() {\r
         *                     console.log('bar trigger clicked');\r
         *                 }\r
         *             }\r
         *         }\r
         *     });\r
         * \r
         * The weight value may be a negative value in order to position custom triggers \r
         * ahead of default triggers like that of ComboBox.\r
         * \r
         *     Ext.create('Ext.form.field.ComboBox', {\r
         *         renderTo: Ext.getBody(),\r
         *         fieldLabel: 'My Custom Field',\r
         *         triggers: {\r
         *             foo: {\r
         *                 cls: 'my-foo-trigger',\r
         *                 weight: -2, // negative to place before default triggers\r
         *                 handler: function() {\r
         *                     console.log('foo trigger clicked');\r
         *                 }\r
         *             },\r
         *             bar: {\r
         *                 cls: 'my-bar-trigger',\r
         *                 weight: -1, \r
         *                 handler: function() {\r
         *                     console.log('bar trigger clicked');\r
         *                 }\r
         *             }\r
         *         }\r
         *     });\r
         */\r
        triggers: undefined\r
    },\r
    \r
    renderConfig: {\r
        /**\r
         * @cfg {Boolean} editable\r
         * false to prevent the user from typing text directly into the field; the field can\r
         * only have its value set programmatically or via an action invoked by a trigger.\r
         */\r
        editable: true\r
    },\r
\r
    /**\r
     * @cfg {String} vtypeText\r
     * A custom error message to display in place of the default message provided for the **`{@link #vtype}`** currently\r
     * set for this field. **Note**: only applies if **`{@link #vtype}`** is set, else ignored.\r
     */\r
\r
    /**\r
     * @cfg {RegExp} stripCharsRe\r
     * A JavaScript RegExp object used to strip unwanted content from the value\r
     * during input. If `stripCharsRe` is specified,\r
     * every *character sequence* matching `stripCharsRe` will be removed.\r
     */\r
\r
    /**\r
     * @cfg {Number} size\r
     * An initial value for the 'size' attribute on the text input element. This is only\r
     * used if the field has no configured {@link #width} and is not given a width by its\r
     * container's layout. Defaults to 20.\r
     * @deprecated use {@link #width} instead.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [grow=false]\r
     * true if this field should automatically grow and shrink to its content\r
     */\r
\r
    /**\r
     * @cfg {Number} growMin\r
     * The minimum width to allow when `{@link #grow} = true`\r
     */\r
    growMin : 30,\r
\r
    /**\r
     * @cfg {Number} growMax\r
     * The maximum width to allow when `{@link #grow} = true`\r
     */\r
    growMax : 800,\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} growAppend\r
     * A string that will be appended to the field's current value for the purposes of calculating the target field\r
     * size. Only used when the {@link #grow} config is true. Defaults to a single capital "W" (the widest character in\r
     * common fonts) to leave enough space for the next typed character and avoid the field value shifting before the\r
     * width is adjusted.\r
     */\r
    growAppend: 'W',\r
    //</locale>\r
\r
    /**\r
     * @cfg {String} vtype\r
     * A validation type name as defined in {@link Ext.form.field.VTypes}\r
     */\r
\r
    /**\r
     * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes (character being\r
     * typed) that do not match.\r
     * Note: It does not filter characters already in the input.\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [disableKeyFilter=false]\r
     * Specify true to disable input keystroke filtering\r
     */\r
\r
    /**\r
     * @cfg {Boolean} [allowBlank=true]\r
     * Specify false to validate that the value's length must be > 0. If `true`, then a blank value is **always** taken to be valid regardless of any {@link #vtype}\r
     * validation that may be applied.\r
     *\r
     * If {@link #vtype} validation must still be applied to blank values, configure {@link #validateBlank} as `true`;\r
     */\r
    allowBlank : true,\r
\r
    /**\r
     * @cfg {Boolean} [validateBlank=false]\r
     * Specify as `true` to modify the behaviour of {@link #allowBlank} so that blank values are not passed as valid, but are subject to any configure {@link #vtype} validation.\r
     */\r
    validateBlank: false,\r
\r
    /**\r
     * @cfg {Boolean} allowOnlyWhitespace\r
     * Specify false to automatically trim the value before validating\r
     * the whether the value is blank. Setting this to false automatically\r
     * sets {@link #allowBlank} to false.\r
     */\r
    allowOnlyWhitespace: true,\r
\r
    /**\r
     * @cfg {Number} minLength\r
     * Minimum input field length required\r
     */\r
    minLength : 0,\r
\r
    /**\r
     * @cfg {Number} maxLength\r
     * Maximum input field length allowed by validation. This behavior is intended to\r
     * provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back\r
     * tracking. To restrict the maximum number of characters that can be entered into the field use the\r
     * **{@link Ext.form.field.Text#enforceMaxLength enforceMaxLength}** option.\r
     *\r
     * Defaults to Number.MAX_VALUE.\r
     */\r
    maxLength : Number.MAX_VALUE,\r
\r
    /**\r
     * @cfg {Boolean} enforceMaxLength\r
     * True to set the maxLength property on the underlying input field. Defaults to false\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} minLengthText\r
     * Error text to display if the **{@link #minLength minimum length}** validation fails.\r
     */\r
    minLengthText : 'The minimum length for this field is {0}',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} maxLengthText\r
     * Error text to display if the **{@link #maxLength maximum length}** validation fails\r
     */\r
    maxLengthText : 'The maximum length for this field is {0}',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Boolean} [selectOnFocus=false]\r
     * `true` to automatically select any existing field text when the field receives input\r
     * focus. Only applies when {@link #editable editable} = true\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} blankText\r
     * The error text to display if the **{@link #allowBlank}** validation fails\r
     */\r
    blankText : 'This field is required',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Function} validator\r
     * A custom validation function to be called during field validation ({@link #getErrors}).\r
     * If specified, this function will be called first, allowing the developer to override the default validation\r
     * process.\r
     * \r
     *     Ext.create('Ext.form.field.Text', {\r
     *         renderTo: document.body,\r
     *         name: 'phone',\r
     *         fieldLabel: 'Phone Number',\r
     *         validator: function (val) {\r
     *             // remove non-numeric characters\r
     *             var tn = val.replace(/[^0-9]/g,''),\r
     *                 errMsg = "Must be a 10 digit telephone number";\r
     *             // if the numeric value is not 10 digits return an error message\r
     *             return (tn.length === 10) ? true : errMsg;\r
     *         }\r
     *     });\r
     *\r
     * @param {Object} value The current field value\r
     * @return {Boolean/String} response\r
     *\r
     *  - True if the value is valid\r
     *  - An error message if the value is invalid\r
     */\r
\r
    /**\r
     * @cfg {RegExp} regex\r
     * A JavaScript RegExp object to be tested against the field value during validation.\r
     * If the test fails, the field will be marked invalid using\r
     * either **{@link #regexText}** or **{@link #invalidText}**.\r
     */\r
\r
    /**\r
     * @cfg {String} regexText\r
     * The error text to display if **{@link #regex}** is used and the test fails during validation\r
     */\r
    regexText : '',\r
\r
    /**\r
     * @cfg {String} emptyText\r
     * The default text to place into an empty field.\r
     *\r
     * Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can\r
     * set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of {@link Ext.form.Basic#submit} to\r
     * false.\r
     *\r
     * Also note that if you use {@link #inputType inputType}:'file', {@link #emptyText} is not supported and should be\r
     * avoided.\r
     *\r
     * Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for\r
     * older browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input\r
     * element itself as the raw value. This means that older browsers will obfuscate the {@link #emptyText} value for\r
     * password input fields.\r
     */\r
\r
    emptyText : '',\r
\r
    /**\r
     * @cfg {String} [emptyCls='x-form-empty-field']\r
     * The CSS class to apply to an empty field to style the **{@link #emptyText}**.\r
     * This class is automatically added and removed as needed depending on the current field value.\r
     */\r
    emptyCls : Ext.baseCSSPrefix + 'form-empty-field',\r
\r
    /**\r
     * @cfg {String} [requiredCls='x-form-required-field']\r
     * The CSS class to apply to a required field, i.e. a field where **{@link #allowBlank}** is false.\r
     */\r
    requiredCls : Ext.baseCSSPrefix + 'form-required-field',\r
\r
    /**\r
     * @cfg {Boolean} [enableKeyEvents=false]\r
     * true to enable the proxying of key events for the HTML input field\r
     */\r
\r
    /**\r
     * @private\r
     */\r
    valueContainsPlaceholder : false,\r
\r
    ariaRole: 'textbox',\r
\r
    /**\r
     * @cfg {Boolean} repeatTriggerClick\r
     * `true` to attach a {@link Ext.util.ClickRepeater click repeater} to the trigger(s).\r
     * Click repeating behavior can also be configured on the individual {@link #triggers\r
     * trigger instances using the trigger's {@link {Ext.form.trigger.Trigger#repeatClick\r
     * repeatClick} config.\r
     */\r
    repeatTriggerClick: false,\r
\r
    /**\r
     * @cfg {Boolean} readOnly\r
     * `true` to prevent the user from changing the field, and hide all triggers.\r
     */\r
\r
    /**\r
     * @cfg stateEvents\r
     * @inheritdoc Ext.state.Stateful#cfg-stateEvents\r
     * @localdoc By default the following stateEvents are added:\r
     * \r
     *  - {@link #event-resize} - _(added by Ext.Component)_\r
     *  - {@link #event-change}\r
     */\r
\r
    /**\r
     * @cfg {String}\r
     * The CSS class that is added to the div wrapping the input element and trigger button(s).\r
     */\r
    triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap',\r
\r
    triggerWrapFocusCls: Ext.baseCSSPrefix + 'form-trigger-wrap-focus',\r
    triggerWrapInvalidCls: Ext.baseCSSPrefix + 'form-trigger-wrap-invalid',\r
\r
    fieldBodyCls: Ext.baseCSSPrefix + 'form-text-field-body',\r
\r
    /**\r
     * @cfg {String}\r
     * The CSS class that is added to the element wrapping the input element\r
     */\r
    inputWrapCls: Ext.baseCSSPrefix + 'form-text-wrap',\r
\r
    inputWrapFocusCls: Ext.baseCSSPrefix + 'form-text-wrap-focus',\r
    inputWrapInvalidCls: Ext.baseCSSPrefix + 'form-text-wrap-invalid',\r
    growCls: Ext.baseCSSPrefix + 'form-text-grow',\r
    \r
    needArrowKeys: true,\r
\r
    // Listener block to preventDefault on the mouseup event..\r
    // Observable rejects Ext.emptyFn as a no-op and the listener does not get added so the default does not get prevented.\r
    // We do not want touchend events translated into mouseup, we only want to prevent default on real mouseup events.\r
    squashMouseUp: {\r
        mouseup: function(){},\r
        translate: false,\r
        single: true,\r
        preventDefault: true\r
    },\r
\r
    childEls: [\r
        /**\r
         * @property {Ext.dom.Element} triggerWrap\r
         * A reference to the element which encapsulates the input field and all\r
         * trigger button(s). Only set after the field has been rendered.\r
         */\r
        'triggerWrap',\r
\r
        /**\r
         * @property {Ext.dom.Element} inputWrap\r
         * A reference to the element that wraps the input element. Only set after the\r
         * field has been rendered.\r
         */\r
        'inputWrap'\r
    ],\r
\r
    preSubTpl: [\r
        '<div id="{cmpId}-triggerWrap" data-ref="triggerWrap"',\r
                ' role="presentation" class="{triggerWrapCls} {triggerWrapCls}-{ui}">',\r
            '<div id={cmpId}-inputWrap data-ref="inputWrap"',\r
                ' role="presentation" class="{inputWrapCls} {inputWrapCls}-{ui}">'\r
    ],\r
\r
    postSubTpl: [\r
            '</div>', // end inputWrap\r
            '<tpl for="triggers">{[values.renderTrigger(parent)]}</tpl>',\r
        '</div>' // end triggerWrap\r
    ],\r
\r
    /**\r
     * @event autosize\r
     * Fires when the **{@link #autoSize}** function is triggered and the field is resized according to the\r
     * {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result. This event provides a hook for the\r
     * developer to apply additional logic at runtime to resize the field if needed.\r
     * @param {Ext.form.field.Text} this This text field\r
     * @param {Number} width The new field width\r
     */\r
\r
    /**\r
     * @event keydown\r
     * Keydown input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.\r
     * @param {Ext.form.field.Text} this This text field\r
     * @param {Ext.event.Event} e\r
     */\r
\r
    /**\r
     * @event keyup\r
     * Keyup input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.\r
     * @param {Ext.form.field.Text} this This text field\r
     * @param {Ext.event.Event} e\r
     */\r
\r
    /**\r
     * @event keypress\r
     * Keypress input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.\r
     * @param {Ext.form.field.Text} this This text field\r
     * @param {Ext.event.Event} e\r
     */\r
\r
    initComponent: function () {\r
        var me = this,\r
            emptyCls = me.emptyCls;\r
\r
        if (me.allowOnlyWhitespace === false) {\r
            me.allowBlank = false;\r
        }\r
\r
        //<debug>\r
        if (me.size) {\r
            Ext.log.warn('Ext.form.field.Text "size" config was deprecated in Ext 5.0. Please specify a "width" or use a layout instead.');\r
        }\r
        //</debug>\r
        // In Ext JS 4.x the layout system used the following magic formula for converting\r
        // the "size" config into a pixel value.\r
        if (me.size) {\r
            me.defaultBodyWidth = me.size * 6.5 + 20;\r
        }\r
\r
        if (!me.onTrigger1Click) {\r
            // for compat with 4.x TriggerField\r
            me.onTrigger1Click = me.onTriggerClick;\r
        }\r
\r
        me.callParent();\r
\r
        if (me.readOnly) {\r
            me.setReadOnly(me.readOnly);\r
        }\r
        me.fieldFocusCls = me.baseCls + '-focus';\r
        me.emptyUICls = emptyCls + ' ' + emptyCls + '-' + me.ui;\r
        me.addStateEvents('change');\r
    },\r
\r
    initEvents: function(){\r
        var me = this,\r
            el = me.inputEl;\r
\r
        me.callParent();\r
\r
        // Workaround for https://code.google.com/p/chromium/issues/detail?id=4505\r
        // On mousedown, add a single: true mouseup listener which prevents default.\r
        // That will prevent deselection of the text that was selected in the onFocus method.\r
        if(me.selectOnFocus || me.emptyText){\r
            me.mon(el, 'mousedown', me.onMouseDown, me);\r
        }\r
        if(me.maskRe || (me.vtype && me.disableKeyFilter !== true && (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){\r
            me.mon(el, 'keypress', me.filterKeys, me);\r
        }\r
\r
        if (me.enableKeyEvents) {\r
            me.mon(el, {\r
                scope: me,\r
                keyup: me.onKeyUp,\r
                keydown: me.onKeyDown,\r
                keypress: me.onKeyPress\r
            });\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Treat undefined and null values as equal to an empty string value.\r
     */\r
    isEqual: function(value1, value2) {\r
        return this.isEqualAsString(value1, value2);\r
    },\r
\r
    /**\r
     * @private\r
     * If grow=true, invoke the autoSize method when the field's value is changed.\r
     */\r
    onChange: function(newVal, oldVal) {\r
        this.callParent(arguments);\r
        this.autoSize();\r
    },\r
\r
    getSubTplData: function(fieldData) {\r
        var me = this,\r
            value = me.getRawValue(),\r
            isEmpty = me.emptyText && value.length < 1,\r
            maxLength = me.maxLength,\r
            placeholder, data, inputElAttr;\r
\r
        // We can't just dump the value here, since MAX_VALUE ends up\r
        // being something like 1.xxxxe+300, which gets interpreted as 1\r
        // in the markup\r
        if (me.enforceMaxLength) {\r
            if (maxLength === Number.MAX_VALUE) {\r
                maxLength = undefined;\r
            }\r
        } else {\r
            maxLength = undefined;\r
        }\r
\r
        if (isEmpty) {\r
            if (Ext.supports.Placeholder) {\r
                placeholder = me.emptyText;\r
            } else {\r
                value = me.emptyText;\r
                me.valueContainsPlaceholder = true;\r
            }\r
        }\r
\r
        data = Ext.apply(me.callParent([fieldData]), {\r
            triggerWrapCls: me.triggerWrapCls,\r
            inputWrapCls: me.inputWrapCls,\r
            triggers: me.orderedTriggers,\r
            maxLength: maxLength,\r
            readOnly: !me.editable || me.readOnly,\r
            placeholder: placeholder,\r
            value: value,\r
            fieldCls: me.fieldCls + ((isEmpty && (placeholder || value)) ? ' ' + me.emptyUICls : '') + (me.allowBlank ? '' :  ' ' + me.requiredCls)\r
        });\r
        \r
        inputElAttr = data.inputElAriaAttributes;\r
        \r
        if (inputElAttr) {\r
            inputElAttr['aria-required'] = !me.allowBlank;\r
        }\r
        \r
        return data;\r
    },\r
\r
    onRender: function() {\r
        var me = this,\r
            triggers = me.getTriggers(),\r
            elements = [],\r
            id, triggerEl;\r
\r
        if (Ext.supports.FixedTableWidthBug) {\r
            // Workaround for https://bugs.webkit.org/show_bug.cgi?id=130239 and\r
            // https://code.google.com/p/chromium/issues/detail?id=377190\r
            // See styleHooks for more details\r
            me.el._needsTableWidthFix = true;\r
        }\r
\r
        me.callParent();\r
\r
        if (triggers) {\r
            this.invokeTriggers('onFieldRender');\r
\r
            /**\r
             * @property {Ext.CompositeElement} triggerEl\r
             * @deprecated 5.0\r
             * A composite of all the trigger button elements. Only set after the field has\r
             * been rendered.\r
             */\r
            for(id in triggers) {\r
                elements.push(triggers[id].el);\r
            }\r
            // for 4.x compat, also set triggerCell\r
            triggerEl = me.triggerEl = me.triggerCell = new Ext.CompositeElement(elements, true);\r
        }\r
\r
        /**\r
         * @property {Ext.dom.Element} inputCell\r
         * A reference to the element that wraps the input element. Only set after the\r
         * field has been rendered.\r
         * @deprecated 5.0 use {@link #inputWrap} instead\r
         */\r
        me.inputCell = me.inputWrap;\r
    },\r
\r
    afterRender: function(){\r
        var me = this;\r
\r
        me.autoSize();\r
        me.callParent();\r
        me.invokeTriggers('afterFieldRender');\r
    },\r
\r
    onMouseDown: function(){\r
        if (!this.hasFocus) {\r
            // On the next mouseup, prevent default.\r
            // 99% of the time, it will be the mouseup of the click into the field, and \r
            // We will be preventing deselection of selected text: https://code.google.com/p/chromium/issues/detail?id=4505\r
            // Listener is on the doc in case the pointer moves out before user lets go.\r
            Ext.getDoc().on(this.squashMouseUp);\r
        }\r
    },\r
\r
    applyTriggers: function(triggers) {\r
        var me = this,\r
            hideAllTriggers = me.getHideTrigger(),\r
            readOnly = me.readOnly,\r
            orderedTriggers = me.orderedTriggers = [],\r
            repeatTriggerClick = me.repeatTriggerClick,\r
            id, triggerCfg, trigger, triggerCls, i;\r
\r
        //<debug>\r
        if (me.rendered) {\r
            Ext.raise("Cannot set triggers after field has already been rendered.");\r
        }\r
\r
        // don't warn if we have both triggerCls and triggers, because picker field\r
        // uses triggerCls to style the "picker" trigger.\r
        if ((me.triggerCls && !triggers) || me.trigger1Cls) {\r
            Ext.log.warn("Ext.form.field.Text: 'triggerCls' and 'trigger<n>Cls'" +\r
                " are deprecated.  Use 'triggers' instead.");\r
        }\r
        //</debug>\r
\r
        if (!triggers) {\r
            // For compatibility with 4.x, transform the trigger<n>Cls configs into the\r
            // new "triggers" config.\r
            triggers = {};\r
\r
            if (me.triggerCls && !me.trigger1Cls) {\r
                me.trigger1Cls = me.triggerCls;\r
            }\r
\r
            // Assignment in conditional test is deliberate here\r
            for (i = 1; triggerCls = me['trigger' + i + 'Cls']; i++) { // jshint ignore:line\r
                triggers['trigger' + i] = {\r
                    cls: triggerCls,\r
                    extraCls: Ext.baseCSSPrefix + 'trigger-index-' + i,\r
                    handler: 'onTrigger' + i + 'Click',\r
                    compat4Mode: true,\r
                    scope: me\r
                };\r
            }\r
        }\r
\r
        for(id in triggers) {\r
            if (triggers.hasOwnProperty(id)) {\r
                triggerCfg = triggers[id];\r
                triggerCfg.field = me;\r
                triggerCfg.id = id;\r
\r
                /*\r
                 * An explicitly-configured 'triggerConfig.hideOnReadOnly : false' allows {@link #hideTrigger} analysis\r
                 */\r
                if ((readOnly && triggerCfg.hideOnReadOnly !== false) || (hideAllTriggers && triggerCfg.hidden !== false)) {\r
                    triggerCfg.hidden = true;\r
                }\r
                if (repeatTriggerClick && (triggerCfg.repeatClick !== false)) {\r
                    triggerCfg.repeatClick = true;\r
                }\r
\r
                trigger = triggers[id] = Ext.form.trigger.Trigger.create(triggerCfg);\r
                orderedTriggers.push(trigger);\r
            }\r
        }\r
\r
        Ext.Array.sort(orderedTriggers, Ext.form.trigger.Trigger.weightComparator);\r
\r
        return triggers;\r
    },\r
\r
    /**\r
     * Invokes a method on all triggers.\r
     * @param {String} methodName\r
     * @private\r
     */\r
    invokeTriggers: function(methodName, args) {\r
        var me = this,\r
            triggers = me.getTriggers(),\r
            id, trigger;\r
\r
        if (triggers) {\r
            for (id in triggers) {\r
                if (triggers.hasOwnProperty(id)) {\r
                    trigger = triggers[id];\r
                    // IE8 needs "|| []" if args is undefined\r
                    trigger[methodName].apply(trigger, args || []);\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Returns the trigger with the given id\r
     * @param {String} id\r
     * @return {Ext.form.trigger.Trigger}\r
     */\r
    getTrigger: function(id) {\r
        return this.getTriggers()[id];\r
    },\r
\r
    updateHideTrigger: function(hideTrigger) {\r
        this.invokeTriggers(hideTrigger ? 'hide' : 'show');\r
    },\r
\r
    updateEditable: function(editable, oldEditable) {\r
        this.setReadOnlyAttr(!editable || this.readOnly);\r
    },\r
\r
    /**\r
     * Sets the read-only state of this field.\r
     * @param {Boolean} readOnly True to prevent the user changing the field and explicitly\r
     * hide the trigger(s). Setting this to true will supersede settings editable and\r
     * hideTrigger. Setting this to false will defer back to {@link #editable editable} and {@link #hideTrigger hideTrigger}.\r
     */\r
    setReadOnly: function(readOnly) {\r
        var me = this,\r
            triggers = me.getTriggers(),\r
            hideTriggers = me.getHideTrigger(),\r
            trigger,\r
            id;\r
\r
        readOnly = !!readOnly;\r
\r
        me.callParent([readOnly]);\r
        if (me.rendered) {\r
            me.setReadOnlyAttr(readOnly || !me.editable);\r
        }\r
\r
        if (triggers) {\r
            for (id in triggers) {\r
                trigger = triggers[id];\r
                /*\r
                 * Controlled trigger visibility state is only managed fully when 'hideOnReadOnly' is falsy.\r
                 * Truth table:\r
                 *   - If the trigger is configured/defaulted as 'hideOnReadOnly : true', it's readOnly-visibility\r
                 *     is determined solely by readOnly state of the Field.\r
                 *   - If 'hideOnReadOnly : false/undefined', the Fields.{link #hideTrigger hideTrigger} is honored.\r
                 */\r
                if (trigger.hideOnReadOnly === true || (trigger.hideOnReadOnly !== false && !hideTriggers)) {\r
                    trigger.setVisible(!readOnly);\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Sets the readonly attribute of the input element\r
     */\r
    setReadOnlyAttr: function(readOnly) {\r
        var me = this,\r
            readOnlyName = 'readonly',\r
            inputEl = me.inputEl.dom;\r
\r
        if (readOnly) {\r
            inputEl.setAttribute(readOnlyName, readOnlyName);\r
        } else {\r
            inputEl.removeAttribute(readOnlyName);\r
        }\r
        \r
        if (me.ariaRole) {\r
            me.ariaEl.dom.setAttribute('aria-readonly', !!readOnly);\r
        }\r
    },\r
\r
    /**\r
     * Performs any necessary manipulation of a raw String value to prepare it for conversion and/or\r
     * {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe}\r
     * to the raw value.\r
     * @param {String} value The unprocessed string value\r
     * @return {String} The processed string value\r
     */\r
    processRawValue: function(value) {\r
        var me = this,\r
            stripRe = me.stripCharsRe,\r
            mod, newValue;\r
\r
        if (stripRe) {\r
            // This will force all instances that match stripRe to be removed\r
            // in case the user tries to add it with copy and paste EXTJS-18621\r
            if (!stripRe.global) {\r
                mod = 'g';\r
                mod += (stripRe.ignoreCase) ? 'i' : '';\r
                mod += (stripRe.multiline) ? 'm' : '';\r
                stripRe = new RegExp(stripRe.source, mod);\r
            }\r
\r
            newValue = value.replace(stripRe, '');\r
            if (newValue !== value) {\r
                me.setRawValue(newValue);\r
                value = newValue;\r
            }\r
        }\r
        return value;\r
    },\r
\r
    onDisable: function(){\r
        this.callParent();\r
        if (Ext.isIE) {\r
            this.inputEl.dom.unselectable = 'on';\r
        }\r
    },\r
\r
    onEnable: function(){\r
        this.callParent();\r
        if (Ext.isIE) {\r
            this.inputEl.dom.unselectable = '';\r
        }\r
    },\r
\r
    onKeyDown: function(e) {\r
        this.fireEvent('keydown', this, e);\r
    },\r
\r
    onKeyUp: function(e) {\r
        this.fireEvent('keyup', this, e);\r
    },\r
\r
    onKeyPress: function(e) {\r
        this.fireEvent('keypress', this, e);\r
    },\r
\r
    /**\r
     * Resets the current field value to the originally-loaded value and clears any validation messages.\r
     * Also adds **{@link #emptyText}** and **{@link #emptyCls}** if the original value was blank.\r
     */\r
    reset : function(){\r
        this.callParent();\r
        this.applyEmptyText();\r
    },\r
\r
    applyEmptyText: function(){\r
        var me = this,\r
            emptyText = me.emptyText,\r
            isEmpty;\r
\r
        if (me.rendered && emptyText) {\r
            isEmpty = me.getRawValue().length < 1 && !me.hasFocus;\r
\r
            if (Ext.supports.Placeholder) {\r
                me.inputEl.dom.placeholder = emptyText;\r
            } else if (isEmpty) {\r
                me.setRawValue(emptyText);\r
                me.valueContainsPlaceholder = true;\r
            }\r
\r
            //all browsers need this because of a styling issue with chrome + placeholders.\r
            //the text isnt vertically aligned when empty (and using the placeholder)\r
            if (isEmpty) {\r
                me.inputEl.addCls(me.emptyUICls);\r
            }\r
            else {\r
                me.inputEl.removeCls(me.emptyUICls);\r
            }\r
\r
            me.autoSize();\r
        }\r
    },\r
    /**\r
     * Returns the value of this field's {@link #cfg-emptyText}\r
     * @return {String} The value of this field's emptyText\r
     */\r
    getEmptyText : function () {\r
        return this.emptyText;\r
    },\r
    \r
    /**\r
     * Sets the default text to place into an empty field\r
     * @param {String} value The {@link #cfg-emptyText} value for this field\r
     * @return {Ext.form.field.Text} this\r
     */\r
    setEmptyText: function(value) {\r
        var me = this,\r
            inputEl = me.inputEl,\r
            inputDom = inputEl && inputEl.dom,\r
            emptyText = value || '';\r
\r
        if (value) {\r
            me.emptyText = emptyText;\r
            me.applyEmptyText();\r
        } else if (inputDom) {\r
            if (Ext.supports.Placeholder) {\r
                inputDom.removeAttribute('placeholder');\r
            } else {\r
                if (inputDom.value !== me.getRawValue()) {\r
                    // only way these are !== is if emptyText is in the dom.value\r
                    inputDom.value = '';\r
                    inputEl.removeCls(me.emptyUICls);\r
                }\r
            }\r
            // value is null so it cannot be the input value:\r
            me.valueContainsPlaceholder = false;\r
        }\r
        // This has to be added at the end because getRawValue depends on\r
        // the emptyText value to return an empty string or not in legacy browsers.\r
        me.emptyText = emptyText;\r
        return me;\r
    },\r
\r
    afterFirstLayout: function() {\r
        this.callParent();\r
        if (Ext.isIE && this.disabled) {\r
            var el = this.inputEl;\r
            if (el) {\r
                el.dom.unselectable = 'on';\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    toggleInvalidCls: function(hasError) {\r
        var method = hasError ? 'addCls' : 'removeCls';\r
\r
        this.callParent();\r
\r
        this.triggerWrap[method](this.triggerWrapInvalidCls);\r
        this.inputWrap[method](this.inputWrapInvalidCls);\r
    },\r
\r
    beforeFocus: function(){\r
        var me = this,\r
            inputEl = me.inputEl,\r
            emptyText = me.emptyText,\r
            isEmpty;\r
\r
        me.callParent(arguments);\r
        if ((emptyText && !Ext.supports.Placeholder) && (inputEl.dom.value === me.emptyText && me.valueContainsPlaceholder)) {\r
            me.setRawValue('');\r
            isEmpty = true;\r
            inputEl.removeCls(me.emptyUICls);\r
            me.valueContainsPlaceholder = false;\r
        } else if (Ext.supports.Placeholder) {\r
            inputEl.removeCls(me.emptyUICls);\r
        }\r
    },\r
\r
    onFocus: function(e) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
        if (me.selectOnFocus) {\r
            me.inputEl.dom.select();\r
        }\r
\r
        if (me.emptyText) {\r
            me.autoSize();\r
        }\r
\r
        me.addCls(me.fieldFocusCls);\r
        me.triggerWrap.addCls(me.triggerWrapFocusCls);\r
        me.inputWrap.addCls(me.inputWrapFocusCls);\r
        me.invokeTriggers('onFieldFocus', [e]);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onBlur: function(e) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        me.removeCls(me.fieldFocusCls);\r
        me.triggerWrap.removeCls(me.triggerWrapFocusCls);\r
        me.inputWrap.removeCls(me.inputWrapFocusCls);\r
        me.invokeTriggers('onFieldBlur', [e]);\r
    },\r
\r
    completeEdit: function(e) {\r
        this.callParent([e]);\r
        this.applyEmptyText();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    filterKeys : function(e){\r
        /*\r
         * Current only FF will fire keypress events for special keys.\r
         * \r
         * On European keyboards, the right alt key, Alt Gr, is used to type certain special characters.\r
         * JS detects a keypress of this as ctrlKey & altKey. As such, we check that alt isn't pressed\r
         * so we can still process these special characters.\r
         */\r
        if ((e.ctrlKey && !e.altKey) || e.isSpecialKey()) {\r
            return;\r
        }\r
        var charCode = String.fromCharCode(e.getCharCode());\r
        if (!this.maskRe.test(charCode)) {\r
            e.stopEvent();\r
        }\r
    },\r
\r
    getState: function() {\r
        return this.addPropertyToState(this.callParent(), 'value');\r
    },\r
\r
    applyState: function(state) {\r
        this.callParent(arguments);\r
        if(state.hasOwnProperty('value')) {\r
            this.setValue(state.value);\r
        }\r
    },\r
\r
    /**\r
     * Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets\r
     * the current value of the input element if the field has been rendered, ignoring the value if it is the\r
     * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.\r
     * @return {String} The raw String value of the field\r
     */\r
    getRawValue: function() {\r
        var me = this,\r
            v = me.callParent();\r
        if (v === me.emptyText && me.valueContainsPlaceholder) {\r
            v = '';\r
        }\r
        return v;\r
    },\r
\r
    /**\r
     * Sets a data value into the field and runs the change detection and validation. Also applies any configured\r
     * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.\r
     * @param {Object} value The value to set\r
     * @return {Ext.form.field.Text} this\r
     */\r
    setValue: function(value) {\r
        var me = this,\r
            inputEl = me.inputEl;\r
\r
        if (inputEl && me.emptyText && !Ext.isEmpty(value)) {\r
            inputEl.removeCls(me.emptyUICls);\r
            me.valueContainsPlaceholder = false;\r
        }\r
\r
        me.callParent(arguments);\r
\r
        me.applyEmptyText();\r
        return me;\r
    },\r
\r
    /**\r
     * Validates a value according to the field's validation rules and returns an array of errors\r
     * for any failing validations. Validation rules are processed in the following order:\r
     *\r
     * 1. **Field specific validator**\r
     *\r
     *     A validator offers a way to customize and reuse a validation specification.\r
     *     If a field is configured with a `{@link #validator}`\r
     *     function, it will be passed the current field value.  The `{@link #validator}`\r
     *     function is expected to return either:\r
     *\r
     *     - Boolean `true`  if the value is valid (validation continues).\r
     *     - a String to represent the invalid message if invalid (validation halts).\r
     *\r
     * 2. **Basic Validation**\r
     *\r
     *     If the `{@link #validator}` has not halted validation,\r
     *     basic validation proceeds as follows:\r
     *\r
     *     - `{@link #allowBlank}` : (Invalid message = `{@link #blankText}`)\r
     *\r
     *         Depending on the configuration of `{@link #allowBlank}`, a\r
     *         blank field will cause validation to halt at this step and return\r
     *         Boolean true or false accordingly.\r
     *\r
     *     - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)\r
     *\r
     *         If the passed value does not satisfy the `{@link #minLength}`\r
     *         specified, validation halts.\r
     *\r
     *     -  `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)\r
     *\r
     *         If the passed value does not satisfy the `{@link #maxLength}`\r
     *         specified, validation halts.\r
     *\r
     * 3. **Preconfigured Validation Types (VTypes)**\r
     *\r
     *     If none of the prior validation steps halts validation, a field\r
     *     configured with a `{@link #vtype}` will utilize the\r
     *     corresponding {@link Ext.form.field.VTypes VTypes} validation function.\r
     *     If invalid, either the field's `{@link #vtypeText}` or\r
     *     the VTypes vtype Text property will be used for the invalid message.\r
     *     Keystrokes on the field will be filtered according to the VTypes\r
     *     vtype Mask property.\r
     *\r
     * 4. **Field specific regex test**\r
     *\r
     *     If none of the prior validation steps halts validation, a field's\r
     *     configured `{@link #regex}` test will be processed.\r
     *     The invalid message for this test is configured with `{@link #regexText}`\r
     *\r
     * @param {Object} value The value to validate. The processed raw value will be used if nothing is passed.\r
     * @return {String[]} Array of any validation errors\r
     */\r
    getErrors: function(value) {\r
        value = arguments.length ? (value == null ? '' : value) : this.processRawValue(this.getRawValue());\r
\r
        var me = this,\r
            errors = me.callParent([value]),\r
            validator = me.validator,\r
            vtype = me.vtype,\r
            vtypes = Ext.form.field.VTypes,\r
            regex = me.regex,\r
            format = Ext.String.format,\r
            msg, trimmed, isBlank;\r
\r
        if (Ext.isFunction(validator)) {\r
            msg = validator.call(me, value);\r
            if (msg !== true) {\r
                errors.push(msg);\r
            }\r
        }\r
\r
        trimmed = me.allowOnlyWhitespace ? value : Ext.String.trim(value);\r
\r
        if (trimmed.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {\r
            if (!me.allowBlank) {\r
                errors.push(me.blankText);\r
            }\r
            // If we are not configured to validate blank values, there cannot be any additional errors\r
            if (!me.validateBlank) {\r
                return errors;\r
            }\r
            isBlank = true;\r
        }\r
\r
        // If a blank value has been allowed through, then exempt it from the minLength check.\r
        // It must be allowed to hit the vtype validation.\r
        if (!isBlank && value.length < me.minLength) {\r
            errors.push(format(me.minLengthText, me.minLength));\r
        }\r
\r
        if (value.length > me.maxLength) {\r
            errors.push(format(me.maxLengthText, me.maxLength));\r
        }\r
\r
        if (vtype) {\r
            if (!vtypes[vtype](value, me)) {\r
                errors.push(me.vtypeText || vtypes[vtype +'Text']);\r
            }\r
        }\r
\r
        if (regex && !regex.test(value)) {\r
            errors.push(me.regexText || me.invalidText);\r
        }\r
\r
        return errors;\r
    },\r
\r
    /**\r
     * Selects text in this field\r
     * @param {Number} [start=0] The index where the selection should start\r
     * @param {Number} [end] The index where the selection should end (defaults to the text length)\r
     */\r
    selectText: function (start, end) {\r
        var me = this,\r
            v = me.getRawValue(),\r
            len = v.length,\r
            el = me.inputEl.dom,\r
            range;\r
\r
        if (len > 0) {\r
            start = start === undefined ? 0 : Math.min(start, len);\r
            end = end === undefined ? len : Math.min(end, len);\r
\r
            if (el.setSelectionRange) {\r
                el.setSelectionRange(start, end);\r
            } else if (el.createTextRange) {\r
                range = el.createTextRange();\r
                range.moveStart('character', start);\r
                range.moveEnd('character', end - len);\r
                range.select();\r
            }\r
        }\r
\r
        // TODO: Reinvestigate FF and Opera.\r
    },\r
\r
    // Template method, override in Combobox.\r
    getGrowWidth: function () {\r
        return this.inputEl.dom.value;\r
    },\r
\r
    /**\r
     * Automatically grows the field to accommodate the width of the text up to the maximum\r
     * field width allowed. This only takes effect if {@link #grow} = true, and fires the\r
     * {@link #autosize} event if the width changes.\r
     */\r
    autoSize: function() {\r
        var me = this,\r
            triggers, triggerId, triggerWidth, inputEl, width, value;\r
\r
        if (me.grow && me.rendered && me.getSizeModel().width.auto) {\r
            inputEl = me.inputEl;\r
            triggers = me.getTriggers();\r
            triggerWidth = 0;\r
\r
            value = Ext.util.Format.htmlEncode(\r
                me.getGrowWidth() || (me.hasFocus ? '' : me.emptyText) || ''\r
            );\r
            value += me.growAppend;\r
\r
            for (triggerId in triggers) {\r
                triggerWidth += triggers[triggerId].el.getWidth();\r
            }\r
\r
            width = inputEl.getTextWidth(value) +  triggerWidth +\r
                // The element that has the border depends on theme - inputWrap (classic)\r
                // or triggerWrap (neptune)\r
                me.inputWrap.getBorderWidth('lr') + me.triggerWrap.getBorderWidth('lr');\r
\r
            width = Math.min(Math.max(width, me.growMin), me.growMax);\r
\r
            me.bodyEl.setWidth(width);\r
\r
            me.updateLayout();\r
\r
            me.fireEvent('autosize', me, width);\r
        }\r
    },\r
\r
    onDestroy: function(){\r
        var me = this;\r
\r
        me.invokeTriggers('destroy');\r
        Ext.destroy(me.triggerRepeater);\r
\r
        me.callParent();\r
    },\r
\r
    onTriggerClick: Ext.emptyFn,\r
\r
    privates: {\r
        /**\r
         * @private\r
         */\r
        getTdType: function () {\r
            return 'textfield';\r
        }\r
    },\r
\r
    deprecated: {\r
        5: {\r
            methods: {\r
                /**\r
                 * Get the total width of the trigger button area.\r
                 * @return {Number} The total trigger width\r
                 * @deprecated 5.0\r
                 */\r
                getTriggerWidth: function() {\r
                    var triggers = this.getTriggers(),\r
                        width = 0,\r
                        id;\r
                    if (triggers && this.rendered) {\r
                        for (id in triggers) {\r
                            if (triggers.hasOwnProperty(id)) {\r
                                width += triggers[id].el.getWidth();\r
                            }\r
                        }\r
                    }\r
\r
                    return width;\r
                }\r
            }\r
        }\r
    }\r
\r
});\r