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