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