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