Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Text.html
diff --git a/docs/source/Text.html b/docs/source/Text.html
new file mode 100644 (file)
index 0000000..2e34757
--- /dev/null
@@ -0,0 +1,670 @@
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.field.Text-method-constructor'><span id='Ext-form.field.Text'>/**
+</span></span> * @class Ext.form.field.Text
+ * @extends Ext.form.field.Base
+A basic text field.  Can be used as a direct replacement for traditional text inputs,
+or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
+and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
+
+#Validation#
+
+The Text field has a useful set of validations built in:
+
+- {@link #allowBlank} for making the field required
+- {@link #minLength} for requiring a minimum value length
+- {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
+  as the `maxlength` attribute on the input element)
+- {@link regex} to specify a custom regular expression for validation
+
+In addition, custom validations may be added:
+- {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
+  custom validation logic
+- {@link #validator} allows a custom arbitrary function to be called during validation
+
+The details around how and when each of these validation options get used are described in the
+documentation for {@link #getErrors}.
+
+By default, the field value is checked for validity immediately while the user is typing in the
+field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
+{@link #checkChangeBugger} configurations. Also see the details on Form Validation in the
+{@link Ext.form.Panel} class documentation.
+
+#Masking and Character Stripping#
+
+Text fields can be configured with custom regular expressions to be applied to entered values before
+validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
+{@img Ext.form.Text/Ext.form.Text.png Ext.form.Text component}
+#Example usage:#
+
+    Ext.create('Ext.form.Panel', {
+        title: 'Contact Info',
+        width: 300,
+        bodyPadding: 10,
+        renderTo: Ext.getBody(),        
+        items: [{
+            xtype: 'textfield',
+            name: 'name',
+            fieldLabel: 'Name',
+            allowBlank: false  // requires a non-empty value
+        }, {
+            xtype: 'textfield',
+            name: 'email',
+            fieldLabel: 'Email Address',
+            vtype: 'email'  // requires value to be a valid email address format
+        }]
+    }); 
+
+ * @constructor Creates a new TextField
+ * @param {Object} config Configuration options
+ *
+ * @xtype textfield
+ * @markdown
+ * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
+ */
+Ext.define('Ext.form.field.Text', {
+    extend:'Ext.form.field.Base',
+    alias: 'widget.textfield',
+    requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],
+    alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
+
+<span id='Ext-form.field.Text-cfg-vtypeText'>    /**
+</span>     * @cfg {String} vtypeText A custom error message to display in place of the default message provided
+     * for the &lt;b&gt;&lt;code&gt;{@link #vtype}&lt;/code&gt;&lt;/b&gt; currently set for this field (defaults to &lt;tt&gt;undefined&lt;/tt&gt;).
+     * &lt;b&gt;Note&lt;/b&gt;: only applies if &lt;b&gt;&lt;code&gt;{@link #vtype}&lt;/code&gt;&lt;/b&gt; is set, else ignored.
+     */
+    
+<span id='Ext-form.field.Text-cfg-stripCharsRe'>    /**
+</span>     * @cfg {RegExp} stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value
+     * before validation (defaults to &lt;tt&gt;undefined&lt;/tt&gt;).
+     */
+
+<span id='Ext-form.field.Text-cfg-size'>    /**
+</span>     * @cfg {Number} size An initial value for the 'size' attribute on the text input element. This is only
+     * used if the field has no configured {@link #width} and is not given a width by its container's layout.
+     * Defaults to &lt;tt&gt;20&lt;/tt&gt;.
+     */
+    size: 20,
+
+<span id='Ext-form.field.Text-cfg-grow'>    /**
+</span>     * @cfg {Boolean} grow &lt;tt&gt;true&lt;/tt&gt; if this field should automatically grow and shrink to its content
+     * (defaults to &lt;tt&gt;false&lt;/tt&gt;)
+     */
+
+<span id='Ext-form.field.Text-cfg-growMin'>    /**
+</span>     * @cfg {Number} growMin The minimum width to allow when &lt;code&gt;&lt;b&gt;{@link #grow}&lt;/b&gt; = true&lt;/code&gt; (defaults
+     * to &lt;tt&gt;30&lt;/tt&gt;)
+     */
+    growMin : 30,
+    
+<span id='Ext-form.field.Text-cfg-growMax'>    /**
+</span>     * @cfg {Number} growMax The maximum width to allow when &lt;code&gt;&lt;b&gt;{@link #grow}&lt;/b&gt; = true&lt;/code&gt; (defaults
+     * to &lt;tt&gt;800&lt;/tt&gt;)
+     */
+    growMax : 800,
+
+<span id='Ext-form.field.Text-cfg-growAppend'>    /**
+</span>     * @cfg {String} growAppend
+     * A string that will be appended to the field's current value for the purposes of calculating the target
+     * field size. Only used when the {@link #grow} config is &lt;tt&gt;true&lt;/tt&gt;. Defaults to a single capital &quot;W&quot;
+     * (the widest character in common fonts) to leave enough space for the next typed character and avoid the
+     * field value shifting before the width is adjusted.
+     */
+    growAppend: 'W',
+    
+<span id='Ext-form.field.Text-cfg-vtype'>    /**
+</span>     * @cfg {String} vtype A validation type name as defined in {@link Ext.form.field.VTypes} (defaults to &lt;tt&gt;undefined&lt;/tt&gt;)
+     */
+
+<span id='Ext-form.field.Text-cfg-maskRe'>    /**
+</span>     * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do
+     * not match (defaults to &lt;tt&gt;undefined&lt;/tt&gt;)
+     */
+
+<span id='Ext-form.field.Text-cfg-disableKeyFilter'>    /**
+</span>     * @cfg {Boolean} disableKeyFilter Specify &lt;tt&gt;true&lt;/tt&gt; to disable input keystroke filtering (defaults
+     * to &lt;tt&gt;false&lt;/tt&gt;)
+     */
+
+<span id='Ext-form.field.Text-cfg-allowBlank'>    /**
+</span>     * @cfg {Boolean} allowBlank Specify &lt;tt&gt;false&lt;/tt&gt; to validate that the value's length is &gt; 0 (defaults to
+     * &lt;tt&gt;true&lt;/tt&gt;)
+     */
+    allowBlank : true,
+    
+<span id='Ext-form.field.Text-cfg-minLength'>    /**
+</span>     * @cfg {Number} minLength Minimum input field length required (defaults to &lt;tt&gt;0&lt;/tt&gt;)
+     */
+    minLength : 0,
+    
+<span id='Ext-form.field.Text-cfg-maxLength'>    /**
+</span>     * @cfg {Number} maxLength Maximum input field length allowed by validation (defaults to Number.MAX_VALUE).
+     * This behavior is intended to provide instant feedback to the user by improving usability to allow pasting
+     * and editing or overtyping and back tracking. To restrict the maximum number of characters that can be
+     * entered into the field use the &lt;tt&gt;&lt;b&gt;{@link Ext.form.field.Text#enforceMaxLength enforceMaxLength}&lt;/b&gt;&lt;/tt&gt; option.
+     */
+    maxLength : Number.MAX_VALUE,
+    
+<span id='Ext-form.field.Text-cfg-enforceMaxLength'>    /**
+</span>     * @cfg {Boolean} enforceMaxLength True to set the maxLength property on the underlying input field. Defaults to &lt;tt&gt;false&lt;/tt&gt;
+     */
+
+<span id='Ext-form.field.Text-cfg-minLengthText'>    /**
+</span>     * @cfg {String} minLengthText Error text to display if the &lt;b&gt;&lt;tt&gt;{@link #minLength minimum length}&lt;/tt&gt;&lt;/b&gt;
+     * validation fails (defaults to &lt;tt&gt;'The minimum length for this field is {minLength}'&lt;/tt&gt;)
+     */
+    minLengthText : 'The minimum length for this field is {0}',
+    
+<span id='Ext-form.field.Text-cfg-maxLengthText'>    /**
+</span>     * @cfg {String} maxLengthText Error text to display if the &lt;b&gt;&lt;tt&gt;{@link #maxLength maximum length}&lt;/tt&gt;&lt;/b&gt;
+     * validation fails (defaults to &lt;tt&gt;'The maximum length for this field is {maxLength}'&lt;/tt&gt;)
+     */
+    maxLengthText : 'The maximum length for this field is {0}',
+    
+<span id='Ext-form.field.Text-cfg-selectOnFocus'>    /**
+</span>     * @cfg {Boolean} selectOnFocus &lt;tt&gt;true&lt;/tt&gt; to automatically select any existing field text when the field
+     * receives input focus (defaults to &lt;tt&gt;false&lt;/tt&gt;)
+     */
+    
+<span id='Ext-form.field.Text-cfg-blankText'>    /**
+</span>     * @cfg {String} blankText The error text to display if the &lt;b&gt;&lt;tt&gt;{@link #allowBlank}&lt;/tt&gt;&lt;/b&gt; validation
+     * fails (defaults to &lt;tt&gt;'This field is required'&lt;/tt&gt;)
+     */
+    blankText : 'This field is required',
+    
+<span id='Ext-form.field.Text-cfg-validator'>    /**
+</span>     * @cfg {Function} validator
+     * &lt;p&gt;A custom validation function to be called during field validation ({@link #getErrors})
+     * (defaults to &lt;tt&gt;undefined&lt;/tt&gt;). If specified, this function will be called first, allowing the
+     * developer to override the default validation process.&lt;/p&gt;
+     * &lt;br&gt;&lt;p&gt;This function will be passed the following Parameters:&lt;/p&gt;
+     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+     * &lt;li&gt;&lt;code&gt;value&lt;/code&gt;: &lt;i&gt;Mixed&lt;/i&gt;
+     * &lt;div class=&quot;sub-desc&quot;&gt;The current field value&lt;/div&gt;&lt;/li&gt;
+     * &lt;/ul&gt;&lt;/div&gt;
+     * &lt;br&gt;&lt;p&gt;This function is to Return:&lt;/p&gt;
+     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+     * &lt;li&gt;&lt;code&gt;true&lt;/code&gt;: &lt;i&gt;Boolean&lt;/i&gt;
+     * &lt;div class=&quot;sub-desc&quot;&gt;&lt;code&gt;true&lt;/code&gt; if the value is valid&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;code&gt;msg&lt;/code&gt;: &lt;i&gt;String&lt;/i&gt;
+     * &lt;div class=&quot;sub-desc&quot;&gt;An error message if the value is invalid&lt;/div&gt;&lt;/li&gt;
+     * &lt;/ul&gt;&lt;/div&gt;
+     */
+
+<span id='Ext-form.field.Text-cfg-regex'>    /**
+</span>     * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation
+     * (defaults to &lt;tt&gt;undefined&lt;/tt&gt;). If the test fails, the field will be marked invalid using
+     * &lt;b&gt;&lt;tt&gt;{@link #regexText}&lt;/tt&gt;&lt;/b&gt;.
+     */
+
+<span id='Ext-form.field.Text-cfg-regexText'>    /**
+</span>     * @cfg {String} regexText The error text to display if &lt;b&gt;&lt;tt&gt;{@link #regex}&lt;/tt&gt;&lt;/b&gt; is used and the
+     * test fails during validation (defaults to &lt;tt&gt;''&lt;/tt&gt;)
+     */
+    regexText : '',
+    
+<span id='Ext-form.field.Text-cfg-emptyText'>    /**
+</span>     * @cfg {String} emptyText
+     * &lt;p&gt;The default text to place into an empty field (defaults to &lt;tt&gt;undefined&lt;/tt&gt;).&lt;/p&gt;
+     * &lt;p&gt;Note that normally this value will be submitted to the server if this field is enabled; to prevent this
+     * you can set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of
+     * {@link Ext.form.Basic#submit} to &lt;tt&gt;false&lt;/tt&gt;.&lt;/p&gt;
+     * &lt;p&gt;Also note that if you use &lt;tt&gt;{@link #inputType inputType}:'file'&lt;/tt&gt;, {@link #emptyText} is not
+     * supported and should be avoided.&lt;/p&gt;
+     */
+
+<span id='Ext-form.field.Text-cfg-emptyCls'>    /**
+</span>     * @cfg {String} emptyCls The CSS class to apply to an empty field to style the &lt;b&gt;&lt;tt&gt;{@link #emptyText}&lt;/tt&gt;&lt;/b&gt;
+     * (defaults to &lt;tt&gt;'x-form-empty-field'&lt;/tt&gt;).  This class is automatically added and removed as needed
+     * depending on the current field value.
+     */
+    emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
+
+    ariaRole: 'textbox',
+
+<span id='Ext-form.field.Text-cfg-enableKeyEvents'>    /**
+</span>     * @cfg {Boolean} enableKeyEvents &lt;tt&gt;true&lt;/tt&gt; to enable the proxying of key events for the HTML input field (defaults to &lt;tt&gt;false&lt;/tt&gt;)
+     */
+
+    componentLayout: 'textfield',
+
+    initComponent : function(){
+        this.callParent();
+        this.addEvents(
+<span id='Ext-form.field.Text-event-autosize'>            /**
+</span>             * @event autosize
+             * Fires when the &lt;tt&gt;&lt;b&gt;{@link #autoSize}&lt;/b&gt;&lt;/tt&gt; function is triggered and the field is
+             * resized according to the {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result.
+             * This event provides a hook for the developer to apply additional logic at runtime to resize the
+             * field if needed.
+             * @param {Ext.form.field.Text} this This text field
+             * @param {Number} width The new field width
+             */
+            'autosize',
+
+<span id='Ext-form.field.Text-event-keydown'>            /**
+</span>             * @event keydown
+             * Keydown input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
+             * is set to true.
+             * @param {Ext.form.field.Text} this This text field
+             * @param {Ext.EventObject} e
+             */
+            'keydown',
+<span id='Ext-form.field.Text-event-keyup'>            /**
+</span>             * @event keyup
+             * Keyup input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
+             * is set to true.
+             * @param {Ext.form.field.Text} this This text field
+             * @param {Ext.EventObject} e
+             */
+            'keyup',
+<span id='Ext-form.field.Text-event-keypress'>            /**
+</span>             * @event keypress
+             * Keypress input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
+             * is set to true.
+             * @param {Ext.form.field.Text} this This text field
+             * @param {Ext.EventObject} e
+             */
+            'keypress'
+        );
+    },
+
+    // private
+    initEvents : function(){
+        var me = this,
+            el = me.inputEl;
+        
+        me.callParent();
+        if(me.selectOnFocus || me.emptyText){
+            me.mon(el, 'mousedown', me.onMouseDown, me);
+        }
+        if(me.maskRe || (me.vtype &amp;&amp; me.disableKeyFilter !== true &amp;&amp; (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
+            me.mon(el, 'keypress', me.filterKeys, me);
+        }
+
+        if (me.enableKeyEvents) {
+            me.mon(el, {
+                scope: me,
+                keyup: me.onKeyUp,
+                keydown: me.onKeyDown,
+                keypress: me.onKeyPress
+            });
+        }
+    },
+
+<span id='Ext-form.field.Text-method-isEqual'>    /**
+</span>     * @private override - treat undefined and null values as equal to an empty string value
+     */
+    isEqual: function(value1, value2) {
+        return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
+    },
+
+<span id='Ext-form.field.Text-method-onChange'>    /**
+</span>     * @private
+     * If grow=true, invoke the autoSize method when the field's value is changed.
+     */
+    onChange: function() {
+        this.callParent();
+        this.autoSize();
+    },
+    
+    afterRender: function(){
+        var me = this;
+        if (me.enforceMaxLength) {
+            me.inputEl.dom.maxLength = me.maxLength;
+        }
+        me.applyEmptyText();
+        me.autoSize();
+        me.callParent();
+    },
+
+    onMouseDown: function(e){
+        var me = this;
+        if(!me.hasFocus){
+            me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
+        }
+    },
+
+<span id='Ext-form.field.Text-method-processRawValue'>    /**
+</span>     * Performs any necessary manipulation of a raw String value to prepare it for {@link #stringToValue conversion}
+     * and/or {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe} to the
+     * raw value.
+     * @param {String} value The unprocessed string value
+     * @return {String} The processed string value
+     */
+    processRawValue: function(value) {
+        var me = this,
+            stripRe = me.stripCharsRe,
+            newValue;
+            
+        if (stripRe) {
+            newValue = value.replace(stripRe, '');
+            if (newValue !== value) {
+                me.setRawValue(newValue);
+                value = newValue;
+            }
+        }
+        return value;
+    },
+
+    //private
+    onDisable: function(){
+        this.callParent();
+        if (Ext.isIE) {
+            this.inputEl.dom.unselectable = 'on';
+        }
+    },
+
+    //private
+    onEnable: function(){
+        this.callParent();
+        if (Ext.isIE) {
+            this.inputEl.dom.unselectable = '';
+        }
+    },
+
+    onKeyDown: function(e) {
+        this.fireEvent('keydown', this, e);
+    },
+
+    onKeyUp: function(e) {
+        this.fireEvent('keyup', this, e);
+    },
+
+    onKeyPress: function(e) {
+        this.fireEvent('keypress', this, e);
+    },
+
+<span id='Ext-form.field.Text-method-reset'>    /**
+</span>     * Resets the current field value to the originally-loaded value and clears any validation messages.
+     * Also adds &lt;tt&gt;&lt;b&gt;{@link #emptyText}&lt;/b&gt;&lt;/tt&gt; and &lt;tt&gt;&lt;b&gt;{@link #emptyCls}&lt;/b&gt;&lt;/tt&gt; if the
+     * original value was blank.
+     */
+    reset : function(){
+        this.callParent();
+        this.applyEmptyText();
+    },
+
+    applyEmptyText : function(){
+        var me = this,
+            emptyText = me.emptyText,
+            isEmpty;
+
+        if (me.rendered &amp;&amp; emptyText) {
+            isEmpty = me.getRawValue().length &lt; 1 &amp;&amp; !me.hasFocus;
+            
+            if (Ext.supports.Placeholder) {
+                me.inputEl.dom.placeholder = emptyText;
+            } else if (isEmpty) {
+                me.setRawValue(emptyText);
+            }
+            
+            //all browsers need this because of a styling issue with chrome + placeholders.
+            //the text isnt vertically aligned when empty (and using the placeholder)
+            if (isEmpty) {
+                me.inputEl.addCls(me.emptyCls);
+            }
+
+            me.autoSize();
+        }
+    },
+
+    // private
+    preFocus : function(){
+        var me = this,
+            inputEl = me.inputEl,
+            emptyText = me.emptyText,
+            isEmpty;
+
+        if (emptyText &amp;&amp; !Ext.supports.Placeholder &amp;&amp; inputEl.dom.value === emptyText) {
+            me.setRawValue('');
+            isEmpty = true;
+            inputEl.removeCls(me.emptyCls);
+        } else if (Ext.supports.Placeholder) {
+            me.inputEl.removeCls(me.emptyCls);
+        }
+        if (me.selectOnFocus || isEmpty) {
+            inputEl.dom.select();
+        }
+    },
+
+    onFocus: function() {
+        var me = this;
+        me.callParent(arguments);
+        if (me.emptyText) {
+            me.autoSize();
+        }
+    },
+
+    // private
+    postBlur : function(){
+        this.applyEmptyText();
+    },
+
+    // private
+    filterKeys : function(e){
+        if(e.ctrlKey){
+            return;
+        }
+        var key = e.getKey(),
+            charCode = String.fromCharCode(e.getCharCode());
+            
+        if(Ext.isGecko &amp;&amp; (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE &amp;&amp; e.button === -1))){
+            return;
+        }
+        
+        if(!Ext.isGecko &amp;&amp; e.isSpecialKey() &amp;&amp; !charCode){
+            return;
+        }
+        if(!this.maskRe.test(charCode)){
+            e.stopEvent();
+        }
+    },
+
+<span id='Ext-form.field.Text-method-getRawValue'>    /**
+</span>     * Returns the raw String value of the field, without performing any normalization, conversion, or validation.
+     * Gets the current value of the input element if the field has been rendered, ignoring the value if it is the
+     * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
+     * @return {String} value The raw String value of the field
+     */
+    getRawValue: function() {
+        var me = this,
+            v = me.callParent();
+        if (v === me.emptyText) {
+            v = '';
+        }
+        return v;
+    },
+
+<span id='Ext-form.field.Text-method-setValue'>    /**
+</span>     * Sets a data value into the field and runs the change detection and validation. Also applies any configured
+     * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
+     * @param {Mixed} value The value to set
+     * @return {Ext.form.field.Text} this
+     */
+    setValue: function(value) {
+        var me = this,
+            inputEl = me.inputEl;
+        
+        if (inputEl &amp;&amp; me.emptyText &amp;&amp; !Ext.isEmpty(value)) {
+            inputEl.removeCls(me.emptyCls);
+        }
+        
+        me.callParent(arguments);
+
+        me.applyEmptyText();
+        return me;
+    },
+
+<span id='Ext-form.field.Text-method-getErrors'>    /**
+</span>Validates a value according to the field's validation rules and returns an array of errors
+for any failing validations. Validation rules are processed in the following order:
+
+1. **Field specific validator**
+    
+    A validator offers a way to customize and reuse a validation specification.
+    If a field is configured with a `{@link #validator}`
+    function, it will be passed the current field value.  The `{@link #validator}`
+    function is expected to return either:
+    
+    - Boolean `true`  if the value is valid (validation continues).
+    - a String to represent the invalid message if invalid (validation halts).
+
+2. **Basic Validation**
+
+    If the `{@link #validator}` has not halted validation,
+    basic validation proceeds as follows:
+    
+    - `{@link #allowBlank}` : (Invalid message = `{@link #emptyText}`)
+    
+        Depending on the configuration of &lt;code&gt;{@link #allowBlank}&lt;/code&gt;, a
+        blank field will cause validation to halt at this step and return
+        Boolean true or false accordingly.
+    
+    - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
+
+        If the passed value does not satisfy the `{@link #minLength}`
+        specified, validation halts.
+
+    -  `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
+
+        If the passed value does not satisfy the `{@link #maxLength}`
+        specified, validation halts.
+
+3. **Preconfigured Validation Types (VTypes)**
+
+    If none of the prior validation steps halts validation, a field
+    configured with a `{@link #vtype}` will utilize the
+    corresponding {@link Ext.form.field.VTypes VTypes} validation function.
+    If invalid, either the field's `{@link #vtypeText}` or
+    the VTypes vtype Text property will be used for the invalid message.
+    Keystrokes on the field will be filtered according to the VTypes
+    vtype Mask property.
+
+4. **Field specific regex test**
+
+    If none of the prior validation steps halts validation, a field's
+    configured &lt;code&gt;{@link #regex}&lt;/code&gt; test will be processed.
+    The invalid message for this test is configured with `{@link #regexText}`
+
+     * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
+     * @return {Array} Array of any validation errors
+     * @markdown
+     */
+    getErrors: function(value) {
+        var me = this,
+            errors = me.callParent(arguments),
+            validator = me.validator,
+            emptyText = me.emptyText,
+            allowBlank = me.allowBlank,
+            vtype = me.vtype,
+            vtypes = Ext.form.field.VTypes,
+            regex = me.regex,
+            format = Ext.String.format,
+            msg;
+
+        value = value || me.processRawValue(me.getRawValue());
+
+        if (Ext.isFunction(validator)) {
+            msg = validator.call(me, value);
+            if (msg !== true) {
+                errors.push(msg);
+            }
+        }
+
+        if (value.length &lt; 1 || value === emptyText) {
+            if (!allowBlank) {
+                errors.push(me.blankText);
+            }
+            //if value is blank, there cannot be any additional errors
+            return errors;
+        }
+
+        if (value.length &lt; me.minLength) {
+            errors.push(format(me.minLengthText, me.minLength));
+        }
+
+        if (value.length &gt; me.maxLength) {
+            errors.push(format(me.maxLengthText, me.maxLength));
+        }
+
+        if (vtype) {
+            if(!vtypes[vtype](value, me)){
+                errors.push(me.vtypeText || vtypes[vtype +'Text']);
+            }
+        }
+
+        if (regex &amp;&amp; !regex.test(value)) {
+            errors.push(me.regexText || me.invalidText);
+        }
+
+        return errors;
+    },
+
+<span id='Ext-form.field.Text-method-selectText'>    /**
+</span>     * Selects text in this field
+     * @param {Number} start (optional) The index where the selection should start (defaults to 0)
+     * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
+     */
+    selectText : function(start, end){
+        var me = this,
+            v = me.getRawValue(),
+            doFocus = true,
+            el = me.inputEl.dom,
+            undef,
+            range;
+            
+        if (v.length &gt; 0) {
+            start = start === undef ? 0 : start;
+            end = end === undef ? v.length : end;
+            if (el.setSelectionRange) {
+                el.setSelectionRange(start, end);
+            }
+            else if(el.createTextRange) {
+                range = el.createTextRange();
+                range.moveStart('character', start);
+                range.moveEnd('character', end - v.length);
+                range.select();
+            }
+            doFocus = Ext.isGecko || Ext.isOpera;
+        }
+        if (doFocus) {
+            me.focus();
+        }
+    },
+
+<span id='Ext-form.field.Text-method-autoSize'>    /**
+</span>     * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
+     * This only takes effect if &lt;tt&gt;{@link #grow} = true&lt;/tt&gt;, and fires the {@link #autosize} event if the
+     * width changes.
+     */
+    autoSize: function() {
+        var me = this,
+            width;
+        if (me.grow &amp;&amp; me.rendered) {
+            me.doComponentLayout();
+            width = me.inputEl.getWidth();
+            if (width !== me.lastInputWidth) {
+                me.fireEvent('autosize', width);
+                me.lastInputWidth = width;
+            }
+        }
+    },
+
+    initAria: function() {
+        this.callParent();
+        this.getActionEl().dom.setAttribute('aria-required', this.allowBlank === false);
+    },
+
+<span id='Ext-form.field.Text-method-getBodyNaturalWidth'>    /**
+</span>     * @protected override
+     * To get the natural width of the inputEl, we do a simple calculation based on the
+     * 'size' config. We use hard-coded numbers to approximate what browsers do natively,
+     * to avoid having to read any styles which would hurt performance.
+     */
+    getBodyNaturalWidth: function() {
+        return Math.round(this.size * 6.5) + 20;
+    }
+
+});
+</pre></pre></body></html>
\ No newline at end of file