Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
20  *
21  * A basic text field.  Can be used as a direct replacement for traditional text inputs,
22  * or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
23  * and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
24  *
25  * # Validation
26  *
27  * The Text field has a useful set of validations built in:
28  *
29  * - {@link #allowBlank} for making the field required
30  * - {@link #minLength} for requiring a minimum value length
31  * - {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
32  *   as the `maxlength` attribute on the input element)
33  * - {@link #regex} to specify a custom regular expression for validation
34  *
35  * In addition, custom validations may be added:
36  *
37  * - {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
38  *   custom validation logic
39  * - {@link #validator} allows a custom arbitrary function to be called during validation
40  *
41  * The details around how and when each of these validation options get used are described in the
42  * documentation for {@link #getErrors}.
43  *
44  * By default, the field value is checked for validity immediately while the user is typing in the
45  * field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
46  * {@link #checkChangeBuffer} configurations. Also see the details on Form Validation in the
47  * {@link Ext.form.Panel} class documentation.
48  *
49  * # Masking and Character Stripping
50  *
51  * Text fields can be configured with custom regular expressions to be applied to entered values before
52  * validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
53  *
54  * # Example usage
55  *
56  *     @example
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 Ext.define('Ext.form.field.Text', {
76     extend:'Ext.form.field.Base',
77     alias: 'widget.textfield',
78     requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],
79     alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
80
81 <span id='Ext-form-field-Text-cfg-vtypeText'>    /**
82 </span>     * @cfg {String} vtypeText
83      * A custom error message to display in place of the default message provided for the **`{@link #vtype}`** currently
84      * set for this field. **Note**: only applies if **`{@link #vtype}`** is set, else ignored.
85      */
86
87 <span id='Ext-form-field-Text-cfg-stripCharsRe'>    /**
88 </span>     * @cfg {RegExp} stripCharsRe
89      * A JavaScript RegExp object used to strip unwanted content from the value
90      * before validation. If &lt;tt&gt;stripCharsRe&lt;/tt&gt; is specified,
91      * every character matching &lt;tt&gt;stripCharsRe&lt;/tt&gt; will be removed before fed to validation.
92      * This does not change the value of the field.
93      */
94
95 <span id='Ext-form-field-Text-cfg-size'>    /**
96 </span>     * @cfg {Number} size
97      * An initial value for the 'size' attribute on the text input element. This is only used if the field has no
98      * configured {@link #width} and is not given a width by its container's layout. Defaults to 20.
99      */
100     size: 20,
101
102 <span id='Ext-form-field-Text-cfg-grow'>    /**
103 </span>     * @cfg {Boolean} [grow=false]
104      * true if this field should automatically grow and shrink to its content
105      */
106
107 <span id='Ext-form-field-Text-cfg-growMin'>    /**
108 </span>     * @cfg {Number} growMin
109      * The minimum width to allow when `{@link #grow} = true`
110      */
111     growMin : 30,
112
113 <span id='Ext-form-field-Text-cfg-growMax'>    /**
114 </span>     * @cfg {Number} growMax
115      * The maximum width to allow when `{@link #grow} = true`
116      */
117     growMax : 800,
118
119 <span id='Ext-form-field-Text-cfg-growAppend'>    /**
120 </span>     * @cfg {String} growAppend
121      * A string that will be appended to the field's current value for the purposes of calculating the target field
122      * size. Only used when the {@link #grow} config is true. Defaults to a single capital &quot;W&quot; (the widest character in
123      * common fonts) to leave enough space for the next typed character and avoid the field value shifting before the
124      * width is adjusted.
125      */
126     growAppend: 'W',
127
128 <span id='Ext-form-field-Text-cfg-vtype'>    /**
129 </span>     * @cfg {String} vtype
130      * A validation type name as defined in {@link Ext.form.field.VTypes}
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 (character being
135      * typed) that do not match.
136      * Note: It dose not filter characters already in the input.
137      */
138
139 <span id='Ext-form-field-Text-cfg-disableKeyFilter'>    /**
140 </span>     * @cfg {Boolean} [disableKeyFilter=false]
141      * Specify true to disable input keystroke filtering
142      */
143
144 <span id='Ext-form-field-Text-cfg-allowBlank'>    /**
145 </span>     * @cfg {Boolean} allowBlank
146      * Specify false to validate that the value's length is &gt; 0
147      */
148     allowBlank : true,
149
150 <span id='Ext-form-field-Text-cfg-minLength'>    /**
151 </span>     * @cfg {Number} minLength
152      * Minimum input field length required
153      */
154     minLength : 0,
155
156 <span id='Ext-form-field-Text-cfg-maxLength'>    /**
157 </span>     * @cfg {Number} maxLength
158      * Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to
159      * provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back
160      * tracking. To restrict the maximum number of characters that can be entered into the field use the **{@link
161      * Ext.form.field.Text#enforceMaxLength enforceMaxLength}** option.
162      */
163     maxLength : Number.MAX_VALUE,
164
165 <span id='Ext-form-field-Text-cfg-enforceMaxLength'>    /**
166 </span>     * @cfg {Boolean} enforceMaxLength
167      * True to set the maxLength property on the underlying input field. Defaults to false
168      */
169
170 <span id='Ext-form-field-Text-cfg-minLengthText'>    /**
171 </span>     * @cfg {String} minLengthText
172      * Error text to display if the **{@link #minLength minimum length}** validation fails.
173      */
174     minLengthText : 'The minimum length for this field is {0}',
175
176 <span id='Ext-form-field-Text-cfg-maxLengthText'>    /**
177 </span>     * @cfg {String} maxLengthText
178      * Error text to display if the **{@link #maxLength maximum length}** validation fails
179      */
180     maxLengthText : 'The maximum length for this field is {0}',
181
182 <span id='Ext-form-field-Text-cfg-selectOnFocus'>    /**
183 </span>     * @cfg {Boolean} [selectOnFocus=false]
184      * true to automatically select any existing field text when the field receives input focus
185      */
186
187 <span id='Ext-form-field-Text-cfg-blankText'>    /**
188 </span>     * @cfg {String} blankText
189      * The error text to display if the **{@link #allowBlank}** validation fails
190      */
191     blankText : 'This field is required',
192
193 <span id='Ext-form-field-Text-cfg-validator'>    /**
194 </span>     * @cfg {Function} validator
195      * A custom validation function to be called during field validation ({@link #getErrors}).
196      * If specified, this function will be called first, allowing the developer to override the default validation
197      * process.
198      *
199      * This function will be passed the following parameters:
200      *
201      * @cfg {Object} validator.value The current field value
202      * @cfg {Boolean/String} validator.return
203      *
204      * - True if the value is valid
205      * - An error message if the value is invalid
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      * If the test fails, the field will be marked invalid using
211      * either &lt;b&gt;&lt;tt&gt;{@link #regexText}&lt;/tt&gt;&lt;/b&gt; or &lt;b&gt;&lt;tt&gt;{@link #invalidText}&lt;/tt&gt;&lt;/b&gt;.
212      */
213
214 <span id='Ext-form-field-Text-cfg-regexText'>    /**
215 </span>     * @cfg {String} regexText
216      * The error text to display if **{@link #regex}** is used and the test fails during validation
217      */
218     regexText : '',
219
220 <span id='Ext-form-field-Text-cfg-emptyText'>    /**
221 </span>     * @cfg {String} emptyText
222      * The default text to place into an empty field.
223      *
224      * Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can
225      * set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of {@link Ext.form.Basic#submit} to
226      * false.
227      *
228      * Also note that if you use {@link #inputType inputType}:'file', {@link #emptyText} is not supported and should be
229      * avoided.
230      */
231
232 <span id='Ext-form-field-Text-cfg-emptyCls'>    /**
233 </span>     * @cfg {String} [emptyCls='x-form-empty-field']
234      * The CSS class to apply to an empty field to style the **{@link #emptyText}**.
235      * This class is automatically added and removed as needed depending on the current field value.
236      */
237     emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
238
239     ariaRole: 'textbox',
240
241 <span id='Ext-form-field-Text-cfg-enableKeyEvents'>    /**
242 </span>     * @cfg {Boolean} [enableKeyEvents=false]
243      * true to enable the proxying of key events for the HTML input field
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 **{@link #autoSize}** function is triggered and the field is resized according to the
254              * {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result. This event provides a hook for the
255              * developer to apply additional logic at runtime to resize the field if needed.
256              * @param {Ext.form.field.Text} this This text field
257              * @param {Number} width The new field width
258              */
259             'autosize',
260
261 <span id='Ext-form-field-Text-event-keydown'>            /**
262 </span>             * @event keydown
263              * Keydown input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
264              * @param {Ext.form.field.Text} this This text field
265              * @param {Ext.EventObject} e
266              */
267             'keydown',
268 <span id='Ext-form-field-Text-event-keyup'>            /**
269 </span>             * @event keyup
270              * Keyup input field event. This event only fires if **{@link #enableKeyEvents}** 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 **{@link #enableKeyEvents}** is set to true.
278              * @param {Ext.form.field.Text} this This text field
279              * @param {Ext.EventObject} e
280              */
281             'keypress'
282         );
283     },
284
285     // private
286     initEvents : function(){
287         var me = this,
288             el = me.inputEl;
289
290         me.callParent();
291         if(me.selectOnFocus || me.emptyText){
292             me.mon(el, 'mousedown', me.onMouseDown, me);
293         }
294         if(me.maskRe || (me.vtype &amp;&amp; me.disableKeyFilter !== true &amp;&amp; (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
295             me.mon(el, 'keypress', me.filterKeys, me);
296         }
297
298         if (me.enableKeyEvents) {
299             me.mon(el, {
300                 scope: me,
301                 keyup: me.onKeyUp,
302                 keydown: me.onKeyDown,
303                 keypress: me.onKeyPress
304             });
305         }
306     },
307
308 <span id='Ext-form-field-Text-method-isEqual'>    /**
309 </span>     * @private
310      * Override. Treat undefined and null values as equal to an empty string value.
311      */
312     isEqual: function(value1, value2) {
313         return this.isEqualAsString(value1, 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 conversion and/or
344      * {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe}
345      * to the 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 **{@link #emptyText}** and **{@link #emptyCls}** if the original value was blank.
395      */
396     reset : function(){
397         this.callParent();
398         this.applyEmptyText();
399     },
400
401     applyEmptyText : function(){
402         var me = this,
403             emptyText = me.emptyText,
404             isEmpty;
405
406         if (me.rendered &amp;&amp; emptyText) {
407             isEmpty = me.getRawValue().length &lt; 1 &amp;&amp; !me.hasFocus;
408
409             if (Ext.supports.Placeholder) {
410                 me.inputEl.dom.placeholder = emptyText;
411             } else if (isEmpty) {
412                 me.setRawValue(emptyText);
413             }
414
415             //all browsers need this because of a styling issue with chrome + placeholders.
416             //the text isnt vertically aligned when empty (and using the placeholder)
417             if (isEmpty) {
418                 me.inputEl.addCls(me.emptyCls);
419             }
420
421             me.autoSize();
422         }
423     },
424
425     // private
426     preFocus : function(){
427         var me = this,
428             inputEl = me.inputEl,
429             emptyText = me.emptyText,
430             isEmpty;
431
432         if (emptyText &amp;&amp; !Ext.supports.Placeholder &amp;&amp; inputEl.dom.value === emptyText) {
433             me.setRawValue('');
434             isEmpty = true;
435             inputEl.removeCls(me.emptyCls);
436         } else if (Ext.supports.Placeholder) {
437             me.inputEl.removeCls(me.emptyCls);
438         }
439         if (me.selectOnFocus || isEmpty) {
440             inputEl.dom.select();
441         }
442     },
443
444     onFocus: function() {
445         var me = this;
446         me.callParent(arguments);
447         if (me.emptyText) {
448             me.autoSize();
449         }
450     },
451
452     // private
453     postBlur : function(){
454         this.applyEmptyText();
455     },
456
457     // private
458     filterKeys : function(e){
459         /*
460          * On European keyboards, the right alt key, Alt Gr, is used to type certain special characters.
461          * JS detects a keypress of this as ctrlKey &amp; altKey. As such, we check that alt isn't pressed
462          * so we can still process these special characters.
463          */
464         if (e.ctrlKey &amp;&amp; !e.altKey) {
465             return;
466         }
467         var key = e.getKey(),
468             charCode = String.fromCharCode(e.getCharCode());
469
470         if(Ext.isGecko &amp;&amp; (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE &amp;&amp; e.button === -1))){
471             return;
472         }
473
474         if(!Ext.isGecko &amp;&amp; e.isSpecialKey() &amp;&amp; !charCode){
475             return;
476         }
477         if(!this.maskRe.test(charCode)){
478             e.stopEvent();
479         }
480     },
481
482 <span id='Ext-form-field-Text-method-getRawValue'>    /**
483 </span>     * Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets
484      * the current value of the input element if the field has been rendered, ignoring the value if it is the
485      * {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
486      * @return {String} The raw String value of the field
487      */
488     getRawValue: function() {
489         var me = this,
490             v = me.callParent();
491         if (v === me.emptyText) {
492             v = '';
493         }
494         return v;
495     },
496
497 <span id='Ext-form-field-Text-method-setValue'>    /**
498 </span>     * Sets a data value into the field and runs the change detection and validation. Also applies any configured
499      * {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
500      * @param {Object} value The value to set
501      * @return {Ext.form.field.Text} this
502      */
503     setValue: function(value) {
504         var me = this,
505             inputEl = me.inputEl;
506
507         if (inputEl &amp;&amp; me.emptyText &amp;&amp; !Ext.isEmpty(value)) {
508             inputEl.removeCls(me.emptyCls);
509         }
510
511         me.callParent(arguments);
512
513         me.applyEmptyText();
514         return me;
515     },
516
517 <span id='Ext-form-field-Text-method-getErrors'>    /**
518 </span>     * Validates a value according to the field's validation rules and returns an array of errors
519      * for any failing validations. Validation rules are processed in the following order:
520      *
521      * 1. **Field specific validator**
522      *
523      *     A validator offers a way to customize and reuse a validation specification.
524      *     If a field is configured with a `{@link #validator}`
525      *     function, it will be passed the current field value.  The `{@link #validator}`
526      *     function is expected to return either:
527      *
528      *     - Boolean `true`  if the value is valid (validation continues).
529      *     - a String to represent the invalid message if invalid (validation halts).
530      *
531      * 2. **Basic Validation**
532      *
533      *     If the `{@link #validator}` has not halted validation,
534      *     basic validation proceeds as follows:
535      *
536      *     - `{@link #allowBlank}` : (Invalid message = `{@link #emptyText}`)
537      *
538      *         Depending on the configuration of `{@link #allowBlank}`, a
539      *         blank field will cause validation to halt at this step and return
540      *         Boolean true or false accordingly.
541      *
542      *     - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
543      *
544      *         If the passed value does not satisfy the `{@link #minLength}`
545      *         specified, validation halts.
546      *
547      *     -  `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
548      *
549      *         If the passed value does not satisfy the `{@link #maxLength}`
550      *         specified, validation halts.
551      *
552      * 3. **Preconfigured Validation Types (VTypes)**
553      *
554      *     If none of the prior validation steps halts validation, a field
555      *     configured with a `{@link #vtype}` will utilize the
556      *     corresponding {@link Ext.form.field.VTypes VTypes} validation function.
557      *     If invalid, either the field's `{@link #vtypeText}` or
558      *     the VTypes vtype Text property will be used for the invalid message.
559      *     Keystrokes on the field will be filtered according to the VTypes
560      *     vtype Mask property.
561      *
562      * 4. **Field specific regex test**
563      *
564      *     If none of the prior validation steps halts validation, a field's
565      *     configured &lt;code&gt;{@link #regex}&lt;/code&gt; test will be processed.
566      *     The invalid message for this test is configured with `{@link #regexText}`
567      *
568      * @param {Object} value The value to validate. The processed raw value will be used if nothing is passed.
569      * @return {String[]} Array of any validation errors
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=0] The index where the selection should start
624      * @param {Number} [end] 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. This
655      * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the width changes.
656      */
657     autoSize: function() {
658         var me = this,
659             width;
660         if (me.grow &amp;&amp; me.rendered) {
661             me.doComponentLayout();
662             width = me.inputEl.getWidth();
663             if (width !== me.lastInputWidth) {
664                 me.fireEvent('autosize', width);
665                 me.lastInputWidth = width;
666             }
667         }
668     },
669
670     initAria: function() {
671         this.callParent();
672         this.getActionEl().dom.setAttribute('aria-required', this.allowBlank === false);
673     },
674
675 <span id='Ext-form-field-Text-method-getBodyNaturalWidth'>    /**
676 </span>     * To get the natural width of the inputEl, we do a simple calculation based on the 'size' config. We use
677      * hard-coded numbers to approximate what browsers do natively, to avoid having to read any styles which would hurt
678      * performance. Overrides Labelable method.
679      * @protected
680      */
681     getBodyNaturalWidth: function() {
682         return Math.round(this.size * 6.5) + 20;
683     }
684
685 });
686 </pre>
687 </body>
688 </html>