src/form/field/Base.js

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