docs/source/Text.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-field-Text-method-constructor'><span id='Ext-form-field-Text'>/**
  19 </span></span> * @class Ext.form.field.Text
  20  * @extends Ext.form.field.Base
  21
  22 A basic text field.  Can be used as a direct replacement for traditional text inputs,
  23 or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
  24 and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
  25
  26 #Validation#
  27
  28 The Text field has a useful set of validations built in:
  29
  30 - {@link #allowBlank} for making the field required
  31 - {@link #minLength} for requiring a minimum value length
  32 - {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
  33   as the `maxlength` attribute on the input element)
  34 - {@link regex} to specify a custom regular expression for validation
  35
  36 In addition, custom validations may be added:
  37
  38 - {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
  39   custom validation logic
  40 - {@link #validator} allows a custom arbitrary function to be called during validation
  41
  42 The details around how and when each of these validation options get used are described in the
  43 documentation for {@link #getErrors}.
  44
  45 By default, the field value is checked for validity immediately while the user is typing in the
  46 field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
  47 {@link #checkChangeBugger} configurations. Also see the details on Form Validation in the
  48 {@link Ext.form.Panel} class documentation.
  49
  50 #Masking and Character Stripping#
  51
  52 Text fields can be configured with custom regular expressions to be applied to entered values before
  53 validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
  54 {@img Ext.form.Text/Ext.form.Text.png Ext.form.Text component}
  55 #Example usage:#
  56
  57     Ext.create('Ext.form.Panel', {
  58         title: 'Contact Info',
  59         width: 300,
  60         bodyPadding: 10,
  61         renderTo: Ext.getBody(),
  62         items: [{
  63             xtype: 'textfield',
  64             name: 'name',
  65             fieldLabel: 'Name',
  66             allowBlank: false  // requires a non-empty value
  67         }, {
  68             xtype: 'textfield',
  69             name: 'email',
  70             fieldLabel: 'Email Address',
  71             vtype: 'email'  // requires value to be a valid email address format
  72         }]
  73     });
  74
  75  * @constructor Creates a new TextField
  76  * @param {Object} config Configuration options
  77  *
  78  * @xtype textfield
  79  * @markdown
  80  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  81  */
  82 Ext.define('Ext.form.field.Text', {
  83     extend:'Ext.form.field.Base',
  84     alias: 'widget.textfield',
  85     requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],
  86     alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
  87
  88 <span id='Ext-form-field-Text-cfg-vtypeText'>    /**
  89 </span>     * @cfg {String} vtypeText A custom error message to display in place of the default message provided
  90      * 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;).
  91      * &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.
  92      */
  93
  94 <span id='Ext-form-field-Text-cfg-stripCharsRe'>    /**
  95 </span>     * @cfg {RegExp} stripCharsRe A JavaScript RegExp object used to strip unwanted content from the value
  96      * before validation (defaults to &lt;tt&gt;undefined&lt;/tt&gt;).
  97      */
  98
  99 <span id='Ext-form-field-Text-cfg-size'>    /**
 100 </span>     * @cfg {Number} size An initial value for the 'size' attribute on the text input element. This is only
 101      * used if the field has no configured {@link #width} and is not given a width by its container's layout.
 102      * Defaults to &lt;tt&gt;20&lt;/tt&gt;.
 103      */
 104     size: 20,
 105
 106 <span id='Ext-form-field-Text-cfg-grow'>    /**
 107 </span>     * @cfg {Boolean} grow &lt;tt&gt;true&lt;/tt&gt; if this field should automatically grow and shrink to its content
 108      * (defaults to &lt;tt&gt;false&lt;/tt&gt;)
 109      */
 110
 111 <span id='Ext-form-field-Text-cfg-growMin'>    /**
 112 </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
 113      * to &lt;tt&gt;30&lt;/tt&gt;)
 114      */
 115     growMin : 30,
 116
 117 <span id='Ext-form-field-Text-cfg-growMax'>    /**
 118 </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
 119      * to &lt;tt&gt;800&lt;/tt&gt;)
 120      */
 121     growMax : 800,
 122
 123 <span id='Ext-form-field-Text-cfg-growAppend'>    /**
 124 </span>     * @cfg {String} growAppend
 125      * A string that will be appended to the field's current value for the purposes of calculating the target
 126      * 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;
 127      * (the widest character in common fonts) to leave enough space for the next typed character and avoid the
 128      * field value shifting before the width is adjusted.
 129      */
 130     growAppend: 'W',
 131
 132 <span id='Ext-form-field-Text-cfg-vtype'>    /**
 133 </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;)
 134      */
 135
 136 <span id='Ext-form-field-Text-cfg-maskRe'>    /**
 137 </span>     * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do
 138      * not match (defaults to &lt;tt&gt;undefined&lt;/tt&gt;)
 139      */
 140
 141 <span id='Ext-form-field-Text-cfg-disableKeyFilter'>    /**
 142 </span>     * @cfg {Boolean} disableKeyFilter Specify &lt;tt&gt;true&lt;/tt&gt; to disable input keystroke filtering (defaults
 143      * to &lt;tt&gt;false&lt;/tt&gt;)
 144      */
 145
 146 <span id='Ext-form-field-Text-cfg-allowBlank'>    /**
 147 </span>     * @cfg {Boolean} allowBlank Specify &lt;tt&gt;false&lt;/tt&gt; to validate that the value's length is &gt; 0 (defaults to
 148      * &lt;tt&gt;true&lt;/tt&gt;)
 149      */
 150     allowBlank : true,
 151
 152 <span id='Ext-form-field-Text-cfg-minLength'>    /**
 153 </span>     * @cfg {Number} minLength Minimum input field length required (defaults to &lt;tt&gt;0&lt;/tt&gt;)
 154      */
 155     minLength : 0,
 156
 157 <span id='Ext-form-field-Text-cfg-maxLength'>    /**
 158 </span>     * @cfg {Number} maxLength Maximum input field length allowed by validation (defaults to Number.MAX_VALUE).
 159      * This behavior is intended to provide instant feedback to the user by improving usability to allow pasting
 160      * and editing or overtyping and back tracking. To restrict the maximum number of characters that can be
 161      * 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.
 162      */
 163     maxLength : Number.MAX_VALUE,
 164
 165 <span id='Ext-form-field-Text-cfg-enforceMaxLength'>    /**
 166 </span>     * @cfg {Boolean} enforceMaxLength True to set the maxLength property on the underlying input field. Defaults to &lt;tt&gt;false&lt;/tt&gt;
 167      */
 168
 169 <span id='Ext-form-field-Text-cfg-minLengthText'>    /**
 170 </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;
 171      * validation fails (defaults to &lt;tt&gt;'The minimum length for this field is {minLength}'&lt;/tt&gt;)
 172      */
 173     minLengthText : 'The minimum length for this field is {0}',
 174
 175 <span id='Ext-form-field-Text-cfg-maxLengthText'>    /**
 176 </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;
 177      * validation fails (defaults to &lt;tt&gt;'The maximum length for this field is {maxLength}'&lt;/tt&gt;)
 178      */
 179     maxLengthText : 'The maximum length for this field is {0}',
 180
 181 <span id='Ext-form-field-Text-cfg-selectOnFocus'>    /**
 182 </span>     * @cfg {Boolean} selectOnFocus &lt;tt&gt;true&lt;/tt&gt; to automatically select any existing field text when the field
 183      * receives input focus (defaults to &lt;tt&gt;false&lt;/tt&gt;)
 184      */
 185
 186 <span id='Ext-form-field-Text-cfg-blankText'>    /**
 187 </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
 188      * fails (defaults to &lt;tt&gt;'This field is required'&lt;/tt&gt;)
 189      */
 190     blankText : 'This field is required',
 191
 192 <span id='Ext-form-field-Text-cfg-validator'>    /**
 193 </span>     * @cfg {Function} validator
 194      * &lt;p&gt;A custom validation function to be called during field validation ({@link #getErrors})
 195      * (defaults to &lt;tt&gt;undefined&lt;/tt&gt;). If specified, this function will be called first, allowing the
 196      * developer to override the default validation process.&lt;/p&gt;
 197      * &lt;br&gt;&lt;p&gt;This function will be passed the following Parameters:&lt;/p&gt;
 198      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 199      * &lt;li&gt;&lt;code&gt;value&lt;/code&gt;: &lt;i&gt;Mixed&lt;/i&gt;
 200      * &lt;div class=&quot;sub-desc&quot;&gt;The current field value&lt;/div&gt;&lt;/li&gt;
 201      * &lt;/ul&gt;&lt;/div&gt;
 202      * &lt;br&gt;&lt;p&gt;This function is to Return:&lt;/p&gt;
 203      * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 204      * &lt;li&gt;&lt;code&gt;true&lt;/code&gt;: &lt;i&gt;Boolean&lt;/i&gt;
 205      * &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;
 206      * &lt;li&gt;&lt;code&gt;msg&lt;/code&gt;: &lt;i&gt;String&lt;/i&gt;
 207      * &lt;div class=&quot;sub-desc&quot;&gt;An error message if the value is invalid&lt;/div&gt;&lt;/li&gt;
 208      * &lt;/ul&gt;&lt;/div&gt;
 209      */
 210
 211 <span id='Ext-form-field-Text-cfg-regex'>    /**
 212 </span>     * @cfg {RegExp} regex A JavaScript RegExp object to be tested against the field value during validation
 213      * (defaults to &lt;tt&gt;undefined&lt;/tt&gt;). If the test fails, the field will be marked invalid using
 214      * &lt;b&gt;&lt;tt&gt;{@link #regexText}&lt;/tt&gt;&lt;/b&gt;.
 215      */
 216
 217 <span id='Ext-form-field-Text-cfg-regexText'>    /**
 218 </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
 219      * test fails during validation (defaults to &lt;tt&gt;''&lt;/tt&gt;)
 220      */
 221     regexText : '',
 222
 223 <span id='Ext-form-field-Text-cfg-emptyText'>    /**
 224 </span>     * @cfg {String} emptyText
 225      * &lt;p&gt;The default text to place into an empty field (defaults to &lt;tt&gt;undefined&lt;/tt&gt;).&lt;/p&gt;
 226      * &lt;p&gt;Note that normally this value will be submitted to the server if this field is enabled; to prevent this
 227      * you can set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of
 228      * {@link Ext.form.Basic#submit} to &lt;tt&gt;false&lt;/tt&gt;.&lt;/p&gt;
 229      * &lt;p&gt;Also note that if you use &lt;tt&gt;{@link #inputType inputType}:'file'&lt;/tt&gt;, {@link #emptyText} is not
 230      * supported and should be avoided.&lt;/p&gt;
 231      */
 232
 233 <span id='Ext-form-field-Text-cfg-emptyCls'>    /**
 234 </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;
 235      * (defaults to &lt;tt&gt;'x-form-empty-field'&lt;/tt&gt;).  This class is automatically added and removed as needed
 236      * depending on the current field value.
 237      */
 238     emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
 239
 240     ariaRole: 'textbox',
 241
 242 <span id='Ext-form-field-Text-cfg-enableKeyEvents'>    /**
 243 </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;)
 244      */
 245
 246     componentLayout: 'textfield',
 247
 248     initComponent : function(){
 249         this.callParent();
 250         this.addEvents(
 251 <span id='Ext-form-field-Text-event-autosize'>            /**
 252 </span>             * @event autosize
 253              * Fires when the &lt;tt&gt;&lt;b&gt;{@link #autoSize}&lt;/b&gt;&lt;/tt&gt; function is triggered and the field is
 254              * resized according to the {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result.
 255              * This event provides a hook for the developer to apply additional logic at runtime to resize the
 256              * field if needed.
 257              * @param {Ext.form.field.Text} this This text field
 258              * @param {Number} width The new field width
 259              */
 260             'autosize',
 261
 262 <span id='Ext-form-field-Text-event-keydown'>            /**
 263 </span>             * @event keydown
 264              * Keydown input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
 265              * is set to true.
 266              * @param {Ext.form.field.Text} this This text field
 267              * @param {Ext.EventObject} e
 268              */
 269             'keydown',
 270 <span id='Ext-form-field-Text-event-keyup'>            /**
 271 </span>             * @event keyup
 272              * Keyup input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
 273              * is set to true.
 274              * @param {Ext.form.field.Text} this This text field
 275              * @param {Ext.EventObject} e
 276              */
 277             'keyup',
 278 <span id='Ext-form-field-Text-event-keypress'>            /**
 279 </span>             * @event keypress
 280              * Keypress input field event. This event only fires if &lt;tt&gt;&lt;b&gt;{@link #enableKeyEvents}&lt;/b&gt;&lt;/tt&gt;
 281              * is set to true.
 282              * @param {Ext.form.field.Text} this This text field
 283              * @param {Ext.EventObject} e
 284              */
 285             'keypress'
 286         );
 287     },
 288
 289     // private
 290     initEvents : function(){
 291         var me = this,
 292             el = me.inputEl;
 293
 294         me.callParent();
 295         if(me.selectOnFocus || me.emptyText){
 296             me.mon(el, 'mousedown', me.onMouseDown, me);
 297         }
 298         if(me.maskRe || (me.vtype &amp;&amp; me.disableKeyFilter !== true &amp;&amp; (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
 299             me.mon(el, 'keypress', me.filterKeys, me);
 300         }
 301
 302         if (me.enableKeyEvents) {
 303             me.mon(el, {
 304                 scope: me,
 305                 keyup: me.onKeyUp,
 306                 keydown: me.onKeyDown,
 307                 keypress: me.onKeyPress
 308             });
 309         }
 310     },
 311
 312 <span id='Ext-form-field-Text-method-isEqual'>    /**
 313 </span>     * @private override - treat undefined and null values as equal to an empty string value
 314      */
 315     isEqual: function(value1, value2) {
 316         return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
 317     },
 318
 319 <span id='Ext-form-field-Text-method-onChange'>    /**
 320 </span>     * @private
 321      * If grow=true, invoke the autoSize method when the field's value is changed.
 322      */
 323     onChange: function() {
 324         this.callParent();
 325         this.autoSize();
 326     },
 327
 328     afterRender: function(){
 329         var me = this;
 330         if (me.enforceMaxLength) {
 331             me.inputEl.dom.maxLength = me.maxLength;
 332         }
 333         me.applyEmptyText();
 334         me.autoSize();
 335         me.callParent();
 336     },
 337
 338     onMouseDown: function(e){
 339         var me = this;
 340         if(!me.hasFocus){
 341             me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
 342         }
 343     },
 344
 345 <span id='Ext-form-field-Text-method-processRawValue'>    /**
 346 </span>     * Performs any necessary manipulation of a raw String value to prepare it for {@link #stringToValue conversion}
 347      * and/or {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe} to the
 348      * raw value.
 349      * @param {String} value The unprocessed string value
 350      * @return {String} The processed string value
 351      */
 352     processRawValue: function(value) {
 353         var me = this,
 354             stripRe = me.stripCharsRe,
 355             newValue;
 356
 357         if (stripRe) {
 358             newValue = value.replace(stripRe, '');
 359             if (newValue !== value) {
 360                 me.setRawValue(newValue);
 361                 value = newValue;
 362             }
 363         }
 364         return value;
 365     },
 366
 367     //private
 368     onDisable: function(){
 369         this.callParent();
 370         if (Ext.isIE) {
 371             this.inputEl.dom.unselectable = 'on';
 372         }
 373     },
 374
 375     //private
 376     onEnable: function(){
 377         this.callParent();
 378         if (Ext.isIE) {
 379             this.inputEl.dom.unselectable = '';
 380         }
 381     },
 382
 383     onKeyDown: function(e) {
 384         this.fireEvent('keydown', this, e);
 385     },
 386
 387     onKeyUp: function(e) {
 388         this.fireEvent('keyup', this, e);
 389     },
 390
 391     onKeyPress: function(e) {
 392         this.fireEvent('keypress', this, e);
 393     },
 394
 395 <span id='Ext-form-field-Text-method-reset'>    /**
 396 </span>     * Resets the current field value to the originally-loaded value and clears any validation messages.
 397      * 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
 398      * original value was blank.
 399      */
 400     reset : function(){
 401         this.callParent();
 402         this.applyEmptyText();
 403     },
 404
 405     applyEmptyText : function(){
 406         var me = this,
 407             emptyText = me.emptyText,
 408             isEmpty;
 409
 410         if (me.rendered &amp;&amp; emptyText) {
 411             isEmpty = me.getRawValue().length &lt; 1 &amp;&amp; !me.hasFocus;
 412
 413             if (Ext.supports.Placeholder) {
 414                 me.inputEl.dom.placeholder = emptyText;
 415             } else if (isEmpty) {
 416                 me.setRawValue(emptyText);
 417             }
 418
 419             //all browsers need this because of a styling issue with chrome + placeholders.
 420             //the text isnt vertically aligned when empty (and using the placeholder)
 421             if (isEmpty) {
 422                 me.inputEl.addCls(me.emptyCls);
 423             }
 424
 425             me.autoSize();
 426         }
 427     },
 428
 429     // private
 430     preFocus : function(){
 431         var me = this,
 432             inputEl = me.inputEl,
 433             emptyText = me.emptyText,
 434             isEmpty;
 435
 436         if (emptyText &amp;&amp; !Ext.supports.Placeholder &amp;&amp; inputEl.dom.value === emptyText) {
 437             me.setRawValue('');
 438             isEmpty = true;
 439             inputEl.removeCls(me.emptyCls);
 440         } else if (Ext.supports.Placeholder) {
 441             me.inputEl.removeCls(me.emptyCls);
 442         }
 443         if (me.selectOnFocus || isEmpty) {
 444             inputEl.dom.select();
 445         }
 446     },
 447
 448     onFocus: function() {
 449         var me = this;
 450         me.callParent(arguments);
 451         if (me.emptyText) {
 452             me.autoSize();
 453         }
 454     },
 455
 456     // private
 457     postBlur : function(){
 458         this.applyEmptyText();
 459     },
 460
 461     // private
 462     filterKeys : function(e){
 463         if(e.ctrlKey){
 464             return;
 465         }
 466         var key = e.getKey(),
 467             charCode = String.fromCharCode(e.getCharCode());
 468
 469         if(Ext.isGecko &amp;&amp; (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE &amp;&amp; e.button === -1))){
 470             return;
 471         }
 472
 473         if(!Ext.isGecko &amp;&amp; e.isSpecialKey() &amp;&amp; !charCode){
 474             return;
 475         }
 476         if(!this.maskRe.test(charCode)){
 477             e.stopEvent();
 478         }
 479     },
 480
 481 <span id='Ext-form-field-Text-method-getRawValue'>    /**
 482 </span>     * Returns the raw String value of the field, without performing any normalization, conversion, or validation.
 483      * Gets the current value of the input element if the field has been rendered, ignoring the value if it is the
 484      * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
 485      * @return {String} value The raw String value of the field
 486      */
 487     getRawValue: function() {
 488         var me = this,
 489             v = me.callParent();
 490         if (v === me.emptyText) {
 491             v = '';
 492         }
 493         return v;
 494     },
 495
 496 <span id='Ext-form-field-Text-method-setValue'>    /**
 497 </span>     * Sets a data value into the field and runs the change detection and validation. Also applies any configured
 498      * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
 499      * @param {Mixed} value The value to set
 500      * @return {Ext.form.field.Text} this
 501      */
 502     setValue: function(value) {
 503         var me = this,
 504             inputEl = me.inputEl;
 505
 506         if (inputEl &amp;&amp; me.emptyText &amp;&amp; !Ext.isEmpty(value)) {
 507             inputEl.removeCls(me.emptyCls);
 508         }
 509
 510         me.callParent(arguments);
 511
 512         me.applyEmptyText();
 513         return me;
 514     },
 515
 516 <span id='Ext-form-field-Text-method-getErrors'>    /**
 517 </span>Validates a value according to the field's validation rules and returns an array of errors
 518 for any failing validations. Validation rules are processed in the following order:
 519
 520 1. **Field specific validator**
 521
 522     A validator offers a way to customize and reuse a validation specification.
 523     If a field is configured with a `{@link #validator}`
 524     function, it will be passed the current field value.  The `{@link #validator}`
 525     function is expected to return either:
 526
 527     - Boolean `true`  if the value is valid (validation continues).
 528     - a String to represent the invalid message if invalid (validation halts).
 529
 530 2. **Basic Validation**
 531
 532     If the `{@link #validator}` has not halted validation,
 533     basic validation proceeds as follows:
 534
 535     - `{@link #allowBlank}` : (Invalid message = `{@link #emptyText}`)
 536
 537         Depending on the configuration of &lt;code&gt;{@link #allowBlank}&lt;/code&gt;, a
 538         blank field will cause validation to halt at this step and return
 539         Boolean true or false accordingly.
 540
 541     - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
 542
 543         If the passed value does not satisfy the `{@link #minLength}`
 544         specified, validation halts.
 545
 546     -  `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
 547
 548         If the passed value does not satisfy the `{@link #maxLength}`
 549         specified, validation halts.
 550
 551 3. **Preconfigured Validation Types (VTypes)**
 552
 553     If none of the prior validation steps halts validation, a field
 554     configured with a `{@link #vtype}` will utilize the
 555     corresponding {@link Ext.form.field.VTypes VTypes} validation function.
 556     If invalid, either the field's `{@link #vtypeText}` or
 557     the VTypes vtype Text property will be used for the invalid message.
 558     Keystrokes on the field will be filtered according to the VTypes
 559     vtype Mask property.
 560
 561 4. **Field specific regex test**
 562
 563     If none of the prior validation steps halts validation, a field's
 564     configured &lt;code&gt;{@link #regex}&lt;/code&gt; test will be processed.
 565     The invalid message for this test is configured with `{@link #regexText}`
 566
 567      * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
 568      * @return {Array} Array of any validation errors
 569      * @markdown
 570      */
 571     getErrors: function(value) {
 572         var me = this,
 573             errors = me.callParent(arguments),
 574             validator = me.validator,
 575             emptyText = me.emptyText,
 576             allowBlank = me.allowBlank,
 577             vtype = me.vtype,
 578             vtypes = Ext.form.field.VTypes,
 579             regex = me.regex,
 580             format = Ext.String.format,
 581             msg;
 582
 583         value = value || me.processRawValue(me.getRawValue());
 584
 585         if (Ext.isFunction(validator)) {
 586             msg = validator.call(me, value);
 587             if (msg !== true) {
 588                 errors.push(msg);
 589             }
 590         }
 591
 592         if (value.length &lt; 1 || value === emptyText) {
 593             if (!allowBlank) {
 594                 errors.push(me.blankText);
 595             }
 596             //if value is blank, there cannot be any additional errors
 597             return errors;
 598         }
 599
 600         if (value.length &lt; me.minLength) {
 601             errors.push(format(me.minLengthText, me.minLength));
 602         }
 603
 604         if (value.length &gt; me.maxLength) {
 605             errors.push(format(me.maxLengthText, me.maxLength));
 606         }
 607
 608         if (vtype) {
 609             if(!vtypes[vtype](value, me)){
 610                 errors.push(me.vtypeText || vtypes[vtype +'Text']);
 611             }
 612         }
 613
 614         if (regex &amp;&amp; !regex.test(value)) {
 615             errors.push(me.regexText || me.invalidText);
 616         }
 617
 618         return errors;
 619     },
 620
 621 <span id='Ext-form-field-Text-method-selectText'>    /**
 622 </span>     * Selects text in this field
 623      * @param {Number} start (optional) The index where the selection should start (defaults to 0)
 624      * @param {Number} end (optional) The index where the selection should end (defaults to the text length)
 625      */
 626     selectText : function(start, end){
 627         var me = this,
 628             v = me.getRawValue(),
 629             doFocus = true,
 630             el = me.inputEl.dom,
 631             undef,
 632             range;
 633
 634         if (v.length &gt; 0) {
 635             start = start === undef ? 0 : start;
 636             end = end === undef ? v.length : end;
 637             if (el.setSelectionRange) {
 638                 el.setSelectionRange(start, end);
 639             }
 640             else if(el.createTextRange) {
 641                 range = el.createTextRange();
 642                 range.moveStart('character', start);
 643                 range.moveEnd('character', end - v.length);
 644                 range.select();
 645             }
 646             doFocus = Ext.isGecko || Ext.isOpera;
 647         }
 648         if (doFocus) {
 649             me.focus();
 650         }
 651     },
 652
 653 <span id='Ext-form-field-Text-method-autoSize'>    /**
 654 </span>     * Automatically grows the field to accomodate the width of the text up to the maximum field width allowed.
 655      * This only takes effect if &lt;tt&gt;{@link #grow} = true&lt;/tt&gt;, and fires the {@link #autosize} event if the
 656      * width changes.
 657      */
 658     autoSize: function() {
 659         var me = this,
 660             width;
 661         if (me.grow &amp;&amp; me.rendered) {
 662             me.doComponentLayout();
 663             width = me.inputEl.getWidth();
 664             if (width !== me.lastInputWidth) {
 665                 me.fireEvent('autosize', width);
 666                 me.lastInputWidth = width;
 667             }
 668         }
 669     },
 670
 671     initAria: function() {
 672         this.callParent();
 673         this.getActionEl().dom.setAttribute('aria-required', this.allowBlank === false);
 674     },
 675
 676 <span id='Ext-form-field-Text-method-getBodyNaturalWidth'>    /**
 677 </span>     * @protected override
 678      * To get the natural width of the inputEl, we do a simple calculation based on the
 679      * 'size' config. We use hard-coded numbers to approximate what browsers do natively,
 680      * to avoid having to read any styles which would hurt performance.
 681      */
 682     getBodyNaturalWidth: function() {
 683         return Math.round(this.size * 6.5) + 20;
 684     }
 685
 686 });
 687 </pre>
 688 </body>
 689 </html>