Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / Base.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-Base'>/**
19 </span> * @class Ext.form.field.Base
20  * @extends Ext.Component
21
22 Base class for form fields that provides default event handling, rendering, and other common functionality
23 needed by all form field types. Utilizes the {@link Ext.form.field.Field} mixin for value handling and validation,
24 and the {@link Ext.form.Labelable} mixin to provide label and error message display.
25
26 In most cases you will want to use a subclass, such as {@link Ext.form.field.Text} or {@link Ext.form.field.Checkbox},
27 rather than creating instances of this class directly. However if you are implementing a custom form field,
28 using this as the parent class is recommended.
29
30 __Values and Conversions__
31
32 Because BaseField implements the Field mixin, it has a main value that can be initialized with the
33 {@link #value} config and manipulated via the {@link #getValue} and {@link #setValue} methods. This main
34 value can be one of many data types appropriate to the current field, for instance a {@link Ext.form.field.Date Date}
35 field would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML
36 input, this value data type can not always be directly used in the rendered field.
37
38 Therefore BaseField introduces the concept of a &quot;raw value&quot;. This is the value of the rendered HTML input field,
39 and is normally a String. The {@link #getRawValue} and {@link #setRawValue} methods can be used to directly
40 work with the raw value, though it is recommended to use getValue and setValue in most cases.
41
42 Conversion back and forth between the main value and the raw value is handled by the {@link #valueToRaw} and
43 {@link #rawToValue} methods. If you are implementing a subclass that uses a non-String value data type, you
44 should override these methods to handle the conversion.
45
46 __Rendering__
47
48 The content of the field body is defined by the {@link #fieldSubTpl} XTemplate, with its argument data
49 created by the {@link #getSubTplData} method. Override this template and/or method to create custom
50 field renderings.
51 {@img Ext.form.BaseField/Ext.form.BaseField.png Ext.form.BaseField BaseField component}
52 __Example usage:__
53
54     // A simple subclass of BaseField that creates a HTML5 search field. Redirects to the
55     // searchUrl when the Enter key is pressed.
56     Ext.define('Ext.form.SearchField', {
57         extend: 'Ext.form.field.Base',
58         alias: 'widget.searchfield',
59     
60         inputType: 'search',
61     
62         // Config defining the search URL
63         searchUrl: 'http://www.google.com/search?q={0}',
64     
65         // Add specialkey listener
66         initComponent: function() {
67             this.callParent();
68             this.on('specialkey', this.checkEnterKey, this);
69         },
70     
71         // Handle enter key presses, execute the search if the field has a value
72         checkEnterKey: function(field, e) {
73             var value = this.getValue();
74             if (e.getKey() === e.ENTER &amp;&amp; !Ext.isEmpty(value)) {
75                 location.href = Ext.String.format(this.searchUrl, value);
76             }
77         }
78     });
79
80     Ext.create('Ext.form.Panel', {
81         title: 'BaseField Example',
82         bodyPadding: 5,
83         width: 250,
84                 
85         // Fields will be arranged vertically, stretched to full width
86         layout: 'anchor',
87         defaults: {
88             anchor: '100%'
89         },
90         items: [{
91             xtype: 'searchfield',
92             fieldLabel: 'Search',
93             name: 'query'
94         }]
95         renderTo: Ext.getBody()
96     });
97
98  *
99  * @markdown
100  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
101  */
102 Ext.define('Ext.form.field.Base', {
103     extend: 'Ext.Component',
104     mixins: {
105         labelable: 'Ext.form.Labelable',
106         field: 'Ext.form.field.Field'
107     },
108     alias: 'widget.field',
109     alternateClassName: ['Ext.form.Field', 'Ext.form.BaseField'],
110     requires: ['Ext.util.DelayedTask', 'Ext.XTemplate', 'Ext.layout.component.field.Field'],
111
112     fieldSubTpl: [
113         '&lt;input id=&quot;{id}&quot; type=&quot;{type}&quot; ',
114         '&lt;tpl if=&quot;name&quot;&gt;name=&quot;{name}&quot; &lt;/tpl&gt;',
115         '&lt;tpl if=&quot;size&quot;&gt;size=&quot;{size}&quot; &lt;/tpl&gt;',
116         '&lt;tpl if=&quot;tabIdx&quot;&gt;tabIndex=&quot;{tabIdx}&quot; &lt;/tpl&gt;',
117         'class=&quot;{fieldCls} {typeCls}&quot; autocomplete=&quot;off&quot; /&gt;',
118         {
119             compiled: true,
120             disableFormats: true
121         }
122     ],
123
124 <span id='Ext-form-field-Base-cfg-name'>    /**
125 </span>     * @cfg {String} name The name of the field (defaults to undefined). This is used as the parameter
126      * name when including the field value in a {@link Ext.form.Basic#submit form submit()}. If no name is
127      * configured, it falls back to the {@link #inputId}. To prevent the field from being included in the
128      * form submit, set {@link #submitValue} to &lt;tt&gt;false&lt;/tt&gt;.
129      */
130
131 <span id='Ext-form-field-Base-cfg-inputType'>    /**
132 </span>     * @cfg {String} inputType
133      * &lt;p&gt;The type attribute for input fields -- e.g. radio, text, password, file (defaults to &lt;tt&gt;'text'&lt;/tt&gt;).
134      * The extended types supported by HTML5 inputs (url, email, etc.) may also be used, though using them
135      * will cause older browsers to fall back to 'text'.&lt;/p&gt;
136      * &lt;p&gt;The type 'password' must be used to render that field type currently -- there is no separate Ext
137      * component for that. You can use {@link Ext.form.field.File} which creates a custom-rendered file upload
138      * field, but if you want a plain unstyled file input you can use a BaseField with inputType:'file'.&lt;/p&gt;
139      */
140     inputType: 'text',
141
142 <span id='Ext-form-field-Base-cfg-tabIndex'>    /**
143 </span>     * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,
144      * not those which are built via applyTo (defaults to undefined).
145      */
146
147 <span id='Ext-form-field-Base-cfg-invalidText'>    /**
148 </span>     * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided
149      * (defaults to 'The value in this field is invalid')
150      */
151     invalidText : 'The value in this field is invalid',
152
153 <span id='Ext-form-field-Base-cfg-fieldCls'>    /**
154 </span>     * @cfg {String} fieldCls The default CSS class for the field input (defaults to 'x-form-field')
155      */
156     fieldCls : Ext.baseCSSPrefix + 'form-field',
157
158 <span id='Ext-form-field-Base-cfg-fieldStyle'>    /**
159 </span>     * @cfg {String} fieldStyle Optional CSS style(s) to be applied to the {@link #inputEl field input element}.
160      * Should be a valid argument to {@link Ext.core.Element#applyStyles}. Defaults to undefined. See also the
161      * {@link #setFieldStyle} method for changing the style after initialization.
162      */
163
164 <span id='Ext-form-field-Base-cfg-focusCls'>    /**
165 </span>     * @cfg {String} focusCls The CSS class to use when the field receives focus (defaults to 'x-form-focus')
166      */
167     focusCls : Ext.baseCSSPrefix + 'form-focus',
168
169 <span id='Ext-form-field-Base-cfg-dirtyCls'>    /**
170 </span>     * @cfg {String} dirtyCls The CSS class to use when the field value {@link #isDirty is dirty}.
171      */
172     dirtyCls : Ext.baseCSSPrefix + 'form-dirty',
173
174 <span id='Ext-form-field-Base-cfg-checkChangeEvents'>    /**
175 </span>     * @cfg {Array} checkChangeEvents
176      * &lt;p&gt;A list of event names that will be listened for on the field's {@link #inputEl input element}, which
177      * will cause the field's value to be checked for changes. If a change is detected, the
178      * {@link #change change event} will be fired, followed by validation if the {@link #validateOnChange}
179      * option is enabled.&lt;/p&gt;
180      * &lt;p&gt;Defaults to &lt;tt&gt;['change', 'propertychange']&lt;/tt&gt; in Internet Explorer, and &lt;tt&gt;['change', 'input',
181      * 'textInput', 'keyup', 'dragdrop']&lt;/tt&gt; in other browsers. This catches all the ways that field values
182      * can be changed in most supported browsers; the only known exceptions at the time of writing are:&lt;/p&gt;
183      * &lt;ul&gt;
184      * &lt;li&gt;Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas&lt;/li&gt;
185      * &lt;li&gt;Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text
186      * fields and textareas&lt;/li&gt;
187      * &lt;li&gt;Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas&lt;/li&gt;
188      * &lt;/ul&gt;
189      * &lt;p&gt;If you need to guarantee on-the-fly change notifications including these edge cases, you can call the
190      * {@link #checkChange} method on a repeating interval, e.g. using {@link Ext.TaskManager}, or if the field is
191      * within a {@link Ext.form.Panel}, you can use the FormPanel's {@link Ext.form.Panel#pollForChanges}
192      * configuration to set up such a task automatically.&lt;/p&gt;
193      */
194     checkChangeEvents: Ext.isIE &amp;&amp; (!document.documentMode || document.documentMode &lt; 9) ?
195                         ['change', 'propertychange'] :
196                         ['change', 'input', 'textInput', 'keyup', 'dragdrop'],
197
198 <span id='Ext-form-field-Base-cfg-checkChangeBuffer'>    /**
199 </span>     * @cfg {Number} checkChangeBuffer
200      * Defines a timeout in milliseconds for buffering {@link #checkChangeEvents} that fire in rapid succession.
201      * Defaults to 50 milliseconds.
202      */
203     checkChangeBuffer: 50,
204
205     componentLayout: 'field',
206
207 <span id='Ext-form-field-Base-cfg-readOnly'>    /**
208 </span>     * @cfg {Boolean} readOnly &lt;tt&gt;true&lt;/tt&gt; to mark the field as readOnly in HTML
209      * (defaults to &lt;tt&gt;false&lt;/tt&gt;).
210      * &lt;br&gt;&lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this only sets the element's readOnly DOM attribute.
211      * Setting &lt;code&gt;readOnly=true&lt;/code&gt;, for example, will not disable triggering a
212      * ComboBox or Date; it gives you the option of forcing the user to choose
213      * via the trigger without typing in the text box. To hide the trigger use
214      * &lt;code&gt;{@link Ext.form.field.Trigger#hideTrigger hideTrigger}&lt;/code&gt;.&lt;/p&gt;
215      */
216     readOnly : false,
217
218 <span id='Ext-form-field-Base-cfg-readOnlyCls'>    /**
219 </span>     * @cfg {String} readOnlyCls The CSS class applied to the component's main element when it is {@link #readOnly}.
220      */
221     readOnlyCls: Ext.baseCSSPrefix + 'form-readonly',
222
223 <span id='Ext-form-field-Base-cfg-inputId'>    /**
224 </span>     * @cfg {String} inputId
225      * The id that will be given to the generated input DOM element. Defaults to an automatically generated id.
226      * If you configure this manually, you must make sure it is unique in the document.
227      */
228
229 <span id='Ext-form-field-Base-cfg-validateOnBlur'>    /**
230 </span>     * @cfg {Boolean} validateOnBlur
231      * Whether the field should validate when it loses focus (defaults to &lt;tt&gt;true&lt;/tt&gt;). This will cause fields
232      * to be validated as the user steps through the fields in the form regardless of whether they are making
233      * changes to those fields along the way. See also {@link #validateOnChange}.
234      */
235     validateOnBlur: true,
236
237     // private
238     hasFocus : false,
239     
240     baseCls: Ext.baseCSSPrefix + 'field',
241     
242     maskOnDisable: false,
243
244     // private
245     initComponent : function() {
246         var me = this;
247
248         me.callParent();
249
250         me.subTplData = me.subTplData || {};
251
252         me.addEvents(
253 <span id='Ext-form-field-Base-event-focus'>            /**
254 </span>             * @event focus
255              * Fires when this field receives input focus.
256              * @param {Ext.form.field.Base} this
257              */
258             'focus',
259 <span id='Ext-form-field-Base-event-blur'>            /**
260 </span>             * @event blur
261              * Fires when this field loses input focus.
262              * @param {Ext.form.field.Base} this
263              */
264             'blur',
265 <span id='Ext-form-field-Base-event-specialkey'>            /**
266 </span>             * @event specialkey
267              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.
268              * To handle other keys see {@link Ext.panel.Panel#keys} or {@link Ext.util.KeyMap}.
269              * You can check {@link Ext.EventObject#getKey} to determine which key was pressed.
270              * For example: &lt;pre&gt;&lt;code&gt;
271 var form = new Ext.form.Panel({
272     ...
273     items: [{
274             fieldLabel: 'Field 1',
275             name: 'field1',
276             allowBlank: false
277         },{
278             fieldLabel: 'Field 2',
279             name: 'field2',
280             listeners: {
281                 specialkey: function(field, e){
282                     // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
283                     // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
284                     if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {
285                         var form = field.up('form').getForm();
286                         form.submit();
287                     }
288                 }
289             }
290         }
291     ],
292     ...
293 });
294              * &lt;/code&gt;&lt;/pre&gt;
295              * @param {Ext.form.field.Base} this
296              * @param {Ext.EventObject} e The event object
297              */
298             'specialkey'
299         );
300
301         // Init mixins
302         me.initLabelable();
303         me.initField();
304
305         // Default name to inputId
306         if (!me.name) {
307             me.name = me.getInputId();
308         }
309     },
310
311 <span id='Ext-form-field-Base-method-getInputId'>    /**
312 </span>     * Returns the input id for this field. If none was specified via the {@link #inputId} config,
313      * then an id will be automatically generated.
314      */
315     getInputId: function() {
316         return this.inputId || (this.inputId = Ext.id());
317     },
318
319 <span id='Ext-form-field-Base-method-getSubTplData'>    /**
320 </span>     * @protected Creates and returns the data object to be used when rendering the {@link #fieldSubTpl}.
321      * @return {Object} The template data
322      */
323     getSubTplData: function() {
324         var me = this,
325             type = me.inputType,
326             inputId = me.getInputId();
327
328         return Ext.applyIf(me.subTplData, {
329             id: inputId,
330             name: me.name || inputId,
331             type: type,
332             size: me.size || 20,
333             cls: me.cls,
334             fieldCls: me.fieldCls,
335             tabIdx: me.tabIndex,
336             typeCls: Ext.baseCSSPrefix + 'form-' + (type === 'password' ? 'text' : type)
337         });
338     },
339
340 <span id='Ext-form-field-Base-method-getSubTplMarkup'>    /**
341 </span>     * @protected
342      * Gets the markup to be inserted into the outer template's bodyEl. For fields this is the
343      * actual input element.
344      */
345     getSubTplMarkup: function() {
346         return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
347     },
348
349     initRenderTpl: function() {
350         var me = this;
351         if (!me.hasOwnProperty('renderTpl')) {
352             me.renderTpl = me.getTpl('labelableRenderTpl');
353         }
354         return me.callParent();
355     },
356
357     initRenderData: function() {
358         return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
359     },
360
361 <span id='Ext-form-field-Base-method-setFieldStyle'>    /**
362 </span>     * Set the {@link #fieldStyle CSS style} of the {@link #inputEl field input element}.
363      * @param {String/Object/Function} style The style(s) to apply. Should be a valid argument to
364      * {@link Ext.core.Element#applyStyles}.
365      */
366     setFieldStyle: function(style) {
367         var me = this,
368             inputEl = me.inputEl;
369         if (inputEl) {
370             inputEl.applyStyles(style);
371         }
372         me.fieldStyle = style;
373     },
374
375     // private
376     onRender : function() {
377         var me = this,
378             fieldStyle = me.fieldStyle,
379             renderSelectors = me.renderSelectors;
380
381         Ext.applyIf(renderSelectors, me.getLabelableSelectors());
382
383         Ext.applyIf(renderSelectors, {
384 <span id='Ext-form-field-Base-property-inputEl'>            /**
385 </span>             * @property inputEl
386              * @type Ext.core.Element
387              * The input Element for this Field. Only available after the field has been rendered.
388              */
389             inputEl: '.' + me.fieldCls
390         });
391
392         me.callParent(arguments);
393
394         // Make the stored rawValue get set as the input element's value
395         me.setRawValue(me.rawValue);
396
397         if (me.readOnly) {
398             me.setReadOnly(true);
399         }
400         if (me.disabled) {
401             me.disable();
402         }
403         if (fieldStyle) {
404             me.setFieldStyle(fieldStyle);
405         }
406
407         me.renderActiveError();
408     },
409
410     initAria: function() {
411         var me = this;
412         me.callParent();
413
414         // Associate the field to the error message element
415         me.getActionEl().dom.setAttribute('aria-describedby', Ext.id(me.errorEl));
416     },
417
418     getFocusEl: function() {
419         return this.inputEl;
420     },
421
422     isFileUpload: function() {
423         return this.inputType === 'file';
424     },
425
426     extractFileInput: function() {
427         var me = this,
428             fileInput = me.isFileUpload() ? me.inputEl.dom : null,
429             clone;
430         if (fileInput) {
431             clone = fileInput.cloneNode(true);
432             fileInput.parentNode.replaceChild(clone, fileInput);
433             me.inputEl = Ext.get(clone);
434         }
435         return fileInput;
436     },
437
438     // private override to use getSubmitValue() as a convenience
439     getSubmitData: function() {
440         var me = this,
441             data = null,
442             val;
443         if (!me.disabled &amp;&amp; me.submitValue &amp;&amp; !me.isFileUpload()) {
444             val = me.getSubmitValue();
445             if (val !== null) {
446                 data = {};
447                 data[me.getName()] = val;
448             }
449         }
450         return data;
451     },
452
453 <span id='Ext-form-field-Base-method-getSubmitValue'>    /**
454 </span>     * &lt;p&gt;Returns the value that would be included in a standard form submit for this field. This will be combined
455      * with the field's name to form a &lt;tt&gt;name=value&lt;/tt&gt; pair in the {@link #getSubmitData submitted parameters}.
456      * If an empty string is returned then just the &lt;tt&gt;name=&lt;/tt&gt; will be submitted; if &lt;tt&gt;null&lt;/tt&gt; is returned
457      * then nothing will be submitted.&lt;/p&gt;
458      * &lt;p&gt;Note that the value returned will have been {@link #processRawValue processed} but may or may not have
459      * been successfully {@link #validate validated}.&lt;/p&gt;
460      * @return {String} The value to be submitted, or &lt;tt&gt;null&lt;/tt&gt;.
461      */
462     getSubmitValue: function() {
463         return this.processRawValue(this.getRawValue());
464     },
465
466 <span id='Ext-form-field-Base-method-getRawValue'>    /**
467 </span>     * Returns the raw value of the field, without performing any normalization, conversion, or validation.
468      * To get a normalized and converted value see {@link #getValue}.
469      * @return {String} value The raw String value of the field
470      */
471     getRawValue: function() {
472         var me = this,
473             v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
474         me.rawValue = v;
475         return v;
476     },
477
478 <span id='Ext-form-field-Base-method-setRawValue'>    /**
479 </span>     * Sets the field's raw value directly, bypassing {@link #valueToRaw value conversion}, change detection, and
480      * validation. To set the value with these additional inspections see {@link #setValue}.
481      * @param {Mixed} value The value to set
482      * @return {Mixed} value The field value that is set
483      */
484     setRawValue: function(value) {
485         var me = this;
486         value = Ext.value(value, '');
487         me.rawValue = value;
488
489         // Some Field subclasses may not render an inputEl
490         if (me.inputEl) {
491             me.inputEl.dom.value = value;
492         }
493         return value;
494     },
495
496 <span id='Ext-form-field-Base-method-valueToRaw'>    /**
497 </span>     * &lt;p&gt;Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows
498      * controlling how value objects passed to {@link #setValue} are shown to the user, including localization.
499      * For instance, for a {@link Ext.form.field.Date}, this would control how a Date object passed to {@link #setValue}
500      * would be converted to a String for display in the field.&lt;/p&gt;
501      * &lt;p&gt;See {@link #rawToValue} for the opposite conversion.&lt;/p&gt;
502      * &lt;p&gt;The base implementation simply does a standard toString conversion, and converts
503      * {@link Ext#isEmpty empty values} to an empty string.&lt;/p&gt;
504      * @param {Mixed} value The mixed-type value to convert to the raw representation.
505      * @return {Mixed} The converted raw value.
506      */
507     valueToRaw: function(value) {
508         return '' + Ext.value(value, '');
509     },
510
511 <span id='Ext-form-field-Base-method-rawToValue'>    /**
512 </span>     * &lt;p&gt;Converts a raw input field value into a mixed-type value that is suitable for this particular field type.
513      * This allows controlling the normalization and conversion of user-entered values into field-type-appropriate
514      * values, e.g. a Date object for {@link Ext.form.field.Date}, and is invoked by {@link #getValue}.&lt;/p&gt;
515      * &lt;p&gt;It is up to individual implementations to decide how to handle raw values that cannot be successfully
516      * converted to the desired object type.&lt;/p&gt;
517      * &lt;p&gt;See {@link #valueToRaw} for the opposite conversion.&lt;/p&gt;
518      * &lt;p&gt;The base implementation does no conversion, returning the raw value untouched.&lt;/p&gt;
519      * @param {Mixed} rawValue
520      * @return {Mixed} The converted value.
521      */
522     rawToValue: function(rawValue) {
523         return rawValue;
524     },
525
526 <span id='Ext-form-field-Base-method-processRawValue'>    /**
527 </span>     * Performs any necessary manipulation of a raw field value to prepare it for {@link #rawToValue conversion}
528      * and/or {@link #validate validation}, for instance stripping out ignored characters. In the base implementation
529      * it does nothing; individual subclasses may override this as needed.
530      * @param {Mixed} value The unprocessed string value
531      * @return {Mixed} The processed string value
532      */
533     processRawValue: function(value) {
534         return value;
535     },
536
537 <span id='Ext-form-field-Base-method-getValue'>    /**
538 </span>     * Returns the current data value of the field. The type of value returned is particular to the type of the
539      * particular field (e.g. a Date object for {@link Ext.form.field.Date}), as the result of calling {@link #rawToValue} on
540      * the field's {@link #processRawValue processed} String value. To return the raw String value, see {@link #getRawValue}.
541      * @return {Mixed} value The field value
542      */
543     getValue: function() {
544         var me = this,
545             val = me.rawToValue(me.processRawValue(me.getRawValue()));
546         me.value = val;
547         return val;
548     },
549
550 <span id='Ext-form-field-Base-method-setValue'>    /**
551 </span>     * Sets a data value into the field and runs the change detection and validation. To set the value directly
552      * without these inspections see {@link #setRawValue}.
553      * @param {Mixed} value The value to set
554      * @return {Ext.form.field.Field} this
555      */
556     setValue: function(value) {
557         var me = this;
558         me.setRawValue(me.valueToRaw(value));
559         return me.mixins.field.setValue.call(me, value);
560     },
561
562
563     //private
564     onDisable: function() {
565         var me = this,
566             inputEl = me.inputEl;
567         me.callParent();
568         if (inputEl) {
569             inputEl.dom.disabled = true;
570         }
571     },
572
573     //private
574     onEnable: function() {
575         var me = this,
576             inputEl = me.inputEl;
577         me.callParent();
578         if (inputEl) {
579             inputEl.dom.disabled = false;
580         }
581     },
582
583 <span id='Ext-form-field-Base-method-setReadOnly'>    /**
584 </span>     * Sets the read only state of this field.
585      * @param {Boolean} readOnly Whether the field should be read only.
586      */
587     setReadOnly: function(readOnly) {
588         var me = this,
589             inputEl = me.inputEl;
590         if (inputEl) {
591             inputEl.dom.readOnly = readOnly;
592             inputEl.dom.setAttribute('aria-readonly', readOnly);
593         }
594         me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
595         me.readOnly = readOnly;
596     },
597
598     // private
599     fireKey: function(e){
600         if(e.isSpecialKey()){
601             this.fireEvent('specialkey', this, Ext.create('Ext.EventObjectImpl', e));
602         }
603     },
604
605     // private
606     initEvents : function(){
607         var me = this,
608             inputEl = me.inputEl,
609             onChangeTask,
610             onChangeEvent;
611         if (inputEl) {
612             me.mon(inputEl, Ext.EventManager.getKeyEvent(), me.fireKey,  me);
613             me.mon(inputEl, 'focus', me.onFocus, me);
614
615             // standardise buffer across all browsers + OS-es for consistent event order.
616             // (the 10ms buffer for Editors fixes a weird FF/Win editor issue when changing OS window focus)
617             me.mon(inputEl, 'blur', me.onBlur, me, me.inEditor ? {buffer:10} : null);
618
619             // listen for immediate value changes
620             onChangeTask = Ext.create('Ext.util.DelayedTask', me.checkChange, me);
621             me.onChangeEvent = onChangeEvent = function() {
622                 onChangeTask.delay(me.checkChangeBuffer);
623             };
624             Ext.each(me.checkChangeEvents, function(eventName) {
625                 if (eventName === 'propertychange') {
626                     me.usesPropertychange = true;
627                 }
628                 me.mon(inputEl, eventName, onChangeEvent);
629             }, me);
630         }
631         me.callParent();
632     },
633
634     doComponentLayout: function() {
635         var me = this,
636             inputEl = me.inputEl,
637             usesPropertychange = me.usesPropertychange,
638             ename = 'propertychange',
639             onChangeEvent = me.onChangeEvent;
640
641         // In IE if propertychange is one of the checkChangeEvents, we need to remove
642         // the listener prior to layout and re-add it after, to prevent it from firing
643         // needlessly for attribute and style changes applied to the inputEl.
644         if (usesPropertychange) {
645             me.mun(inputEl, ename, onChangeEvent);
646         }
647         me.callParent(arguments);
648         if (usesPropertychange) {
649             me.mon(inputEl, ename, onChangeEvent);
650         }
651     },
652
653     // private
654     preFocus: Ext.emptyFn,
655
656     // private
657     onFocus: function() {
658         var me = this,
659             focusCls = me.focusCls,
660             inputEl = me.inputEl;
661         me.preFocus();
662         if (focusCls &amp;&amp; inputEl) {
663             inputEl.addCls(focusCls);
664         }
665         if (!me.hasFocus) {
666             me.hasFocus = true;
667             me.fireEvent('focus', me);
668         }
669     },
670
671     // private
672     beforeBlur : Ext.emptyFn,
673
674     // private
675     onBlur : function(){
676         var me = this,
677             focusCls = me.focusCls,
678             inputEl = me.inputEl;
679         me.beforeBlur();
680         if (focusCls &amp;&amp; inputEl) {
681             inputEl.removeCls(focusCls);
682         }
683         if (me.validateOnBlur) {
684             me.validate();
685         }
686         me.hasFocus = false;
687         me.fireEvent('blur', me);
688         me.postBlur();
689     },
690
691     // private
692     postBlur : Ext.emptyFn,
693
694
695 <span id='Ext-form-field-Base-method-onDirtyChange'>    /**
696 </span>     * @private Called when the field's dirty state changes. Adds/removes the {@link #dirtyCls} on the main element.
697      * @param {Boolean} isDirty
698      */
699     onDirtyChange: function(isDirty) {
700         this[isDirty ? 'addCls' : 'removeCls'](this.dirtyCls);
701     },
702
703
704 <span id='Ext-form-field-Base-method-isValid'>    /**
705 </span>     * Returns whether or not the field value is currently valid by
706      * {@link #getErrors validating} the {@link #processRawValue processed raw value}
707      * of the field. &lt;b&gt;Note&lt;/b&gt;: {@link #disabled} fields are always treated as valid.
708      * @return {Boolean} True if the value is valid, else false
709      */
710     isValid : function() {
711         var me = this;
712         return me.disabled || me.validateValue(me.processRawValue(me.getRawValue()));
713     },
714
715
716 <span id='Ext-form-field-Base-method-validateValue'>    /**
717 </span>     * &lt;p&gt;Uses {@link #getErrors} to build an array of validation errors. If any errors are found, they are passed
718      * to {@link #markInvalid} and false is returned, otherwise true is returned.&lt;/p&gt;
719      * &lt;p&gt;Previously, subclasses were invited to provide an implementation of this to process validations - from 3.2
720      * onwards {@link #getErrors} should be overridden instead.&lt;/p&gt;
721      * @param {Mixed} value The value to validate
722      * @return {Boolean} True if all validations passed, false if one or more failed
723      */
724     validateValue: function(value) {
725         var me = this,
726             errors = me.getErrors(value),
727             isValid = Ext.isEmpty(errors);
728         if (!me.preventMark) {
729             if (isValid) {
730                 me.clearInvalid();
731             } else {
732                 me.markInvalid(errors);
733             }
734         }
735
736         return isValid;
737     },
738
739 <span id='Ext-form-field-Base-method-markInvalid'>    /**
740 </span>     * &lt;p&gt;Display one or more error messages associated with this field, using {@link #msgTarget} to determine how to
741      * display the messages and applying {@link #invalidCls} to the field's UI element.&lt;/p&gt;
742      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to
743      * return &lt;code&gt;false&lt;/code&gt; if the value does &lt;i&gt;pass&lt;/i&gt; validation. So simply marking a Field as invalid
744      * will not prevent submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation}
745      * option set.&lt;/p&gt;
746      * @param {String/Array} errors The validation message(s) to display.
747      */
748     markInvalid : function(errors) {
749         // Save the message and fire the 'invalid' event
750         var me = this,
751             oldMsg = me.getActiveError();
752         me.setActiveErrors(Ext.Array.from(errors));
753         if (oldMsg !== me.getActiveError()) {
754             me.doComponentLayout();
755         }
756     },
757
758 <span id='Ext-form-field-Base-method-clearInvalid'>    /**
759 </span>     * &lt;p&gt;Clear any invalid styles/messages for this field.&lt;/p&gt;
760      * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to
761      * return &lt;code&gt;true&lt;/code&gt; if the value does not &lt;i&gt;pass&lt;/i&gt; validation. So simply clearing a field's errors
762      * will not necessarily allow submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation}
763      * option set.&lt;/p&gt;
764      */
765     clearInvalid : function() {
766         // Clear the message and fire the 'valid' event
767         var me = this,
768             hadError = me.hasActiveError();
769         me.unsetActiveError();
770         if (hadError) {
771             me.doComponentLayout();
772         }
773     },
774
775 <span id='Ext-form-field-Base-method-renderActiveError'>    /**
776 </span>     * @private Overrides the method from the Ext.form.Labelable mixin to also add the invalidCls to the inputEl,
777      * as that is required for proper styling in IE with nested fields (due to lack of child selector)
778      */
779     renderActiveError: function() {
780         var me = this,
781             hasError = me.hasActiveError();
782         if (me.inputEl) {
783             // Add/remove invalid class
784             me.inputEl[hasError ? 'addCls' : 'removeCls'](me.invalidCls + '-field');
785         }
786         me.mixins.labelable.renderActiveError.call(me);
787     },
788
789
790     getActionEl: function() {
791         return this.inputEl || this.el;
792     }
793
794 });
795 </pre>
796 </body>
797 </html>