docs/source/Field.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.form.Field"></div>/**
   9  * @class Ext.form.Field
  10  * @extends Ext.BoxComponent
  11  * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
  12  * @constructor
  13  * Creates a new Field
  14  * @param {Object} config Configuration options
  15  * @xtype field
  16  */
  17 Ext.form.Field = Ext.extend(Ext.BoxComponent,  {
  18     <div id="cfg-Ext.form.Field-inputType"></div>/**
  19      * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults
  20      * to "text"). The types "file" and "password" must be used to render those field types currently -- there are
  21      * no separate Ext components for those. Note that if you use <tt>inputType:'file'</tt>, {@link #emptyText}
  22      * is not supported and should be avoided.
  23      */
  24     <div id="cfg-Ext.form.Field-tabIndex"></div>/**
  25      * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,
  26      * not those which are built via applyTo (defaults to undefined).
  27      */
  28     <div id="cfg-Ext.form.Field-value"></div>/**
  29      * @cfg {Mixed} value A value to initialize this field with (defaults to undefined).
  30      */
  31     <div id="cfg-Ext.form.Field-name"></div>/**
  32      * @cfg {String} name The field's HTML name attribute (defaults to "").
  33      * <b>Note</b>: this property must be set if this field is to be automatically included with
  34      * {@link Ext.form.BasicForm#submit form submit()}.
  35      */
  36     <div id="cfg-Ext.form.Field-cls"></div>/**
  37      * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to "").
  38      */
  39
  40     <div id="cfg-Ext.form.Field-invalidClass"></div>/**
  41      * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
  42      */
  43     invalidClass : "x-form-invalid",
  44     <div id="cfg-Ext.form.Field-invalidText"></div>/**
  45      * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided
  46      * (defaults to "The value in this field is invalid")
  47      */
  48     invalidText : "The value in this field is invalid",
  49     <div id="cfg-Ext.form.Field-focusClass"></div>/**
  50      * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")
  51      */
  52     focusClass : "x-form-focus",
  53     <div id="cfg-Ext.form.Field-validationEvent"></div>/**
  54      * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable
  55       automatic validation (defaults to "keyup").
  56      */
  57     validationEvent : "keyup",
  58     <div id="cfg-Ext.form.Field-validateOnBlur"></div>/**
  59      * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).
  60      */
  61     validateOnBlur : true,
  62     <div id="cfg-Ext.form.Field-validationDelay"></div>/**
  63      * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation
  64      * is initiated (defaults to 250)
  65      */
  66     validationDelay : 250,
  67     <div id="cfg-Ext.form.Field-autoCreate"></div>/**
  68      * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
  69      * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
  70      * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details.  Defaults to:</p>
  71      * <pre><code>{tag: "input", type: "text", size: "20", autocomplete: "off"}</code></pre>
  72      */
  73     defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},
  74     <div id="cfg-Ext.form.Field-fieldClass"></div>/**
  75      * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")
  76      */
  77     fieldClass : "x-form-field",
  78     <div id="cfg-Ext.form.Field-msgTarget"></div>/**
  79      * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values
  80      * (defaults to 'qtip'):
  81      *<pre>
  82 Value         Description
  83 -----------   ----------------------------------------------------------------------
  84 qtip          Display a quick tip when the user hovers over the field
  85 title         Display a default browser title attribute popup
  86 under         Add a block div beneath the field containing the error text
  87 side          Add an error icon to the right of the field with a popup on hover
  88 [element id]  Add the error text directly to the innerHTML of the specified element
  89 </pre>
  90      */
  91     msgTarget : 'qtip',
  92     <div id="cfg-Ext.form.Field-msgFx"></div>/**
  93      * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field
  94      * (defaults to 'normal').
  95      */
  96     msgFx : 'normal',
  97     <div id="cfg-Ext.form.Field-readOnly"></div>/**
  98      * @cfg {Boolean} readOnly <tt>true</tt> to mark the field as readOnly in HTML
  99      * (defaults to <tt>false</tt>).
 100      * <br><p><b>Note</b>: this only sets the element's readOnly DOM attribute.
 101      * Setting <code>readOnly=true</code>, for example, will not disable triggering a
 102      * ComboBox or DateField; it gives you the option of forcing the user to choose
 103      * via the trigger without typing in the text box. To hide the trigger use
 104      * <code>{@link Ext.form.TriggerField#hideTrigger hideTrigger}</code>.</p>
 105      */
 106     readOnly : false,
 107     <div id="cfg-Ext.form.Field-disabled"></div>/**
 108      * @cfg {Boolean} disabled True to disable the field (defaults to false).
 109      * <p>Be aware that conformant with the <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1">HTML specification</a>,
 110      * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.</p>
 111      */
 112     disabled : false,
 113
 114     // private
 115     isFormField : true,
 116
 117     // private
 118     hasFocus : false,
 119
 120     // private
 121     initComponent : function(){
 122         Ext.form.Field.superclass.initComponent.call(this);
 123         this.addEvents(
 124             <div id="event-Ext.form.Field-focus"></div>/**
 125              * @event focus
 126              * Fires when this field receives input focus.
 127              * @param {Ext.form.Field} this
 128              */
 129             'focus',
 130             <div id="event-Ext.form.Field-blur"></div>/**
 131              * @event blur
 132              * Fires when this field loses input focus.
 133              * @param {Ext.form.Field} this
 134              */
 135             'blur',
 136             <div id="event-Ext.form.Field-specialkey"></div>/**
 137              * @event specialkey
 138              * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.
 139              * To handle other keys see {@link Ext.Panel#keys} or {@link Ext.KeyMap}.
 140              * You can check {@link Ext.EventObject#getKey} to determine which key was pressed.
 141              * For example: <pre><code>
 142 var form = new Ext.form.FormPanel({
 143     ...
 144     items: [{
 145             fieldLabel: 'Field 1',
 146             name: 'field1',
 147             allowBlank: false
 148         },{
 149             fieldLabel: 'Field 2',
 150             name: 'field2',
 151             listeners: {
 152                 specialkey: function(field, e){
 153                     // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
 154                     // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
 155                     if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {
 156                         var form = field.ownerCt.getForm();
 157                         form.submit();
 158                     }
 159                 }
 160             }
 161         }
 162     ],
 163     ...
 164 });
 165              * </code></pre>
 166              * @param {Ext.form.Field} this
 167              * @param {Ext.EventObject} e The event object
 168              */
 169             'specialkey',
 170             <div id="event-Ext.form.Field-change"></div>/**
 171              * @event change
 172              * Fires just before the field blurs if the field value has changed.
 173              * @param {Ext.form.Field} this
 174              * @param {Mixed} newValue The new value
 175              * @param {Mixed} oldValue The original value
 176              */
 177             'change',
 178             <div id="event-Ext.form.Field-invalid"></div>/**
 179              * @event invalid
 180              * Fires after the field has been marked as invalid.
 181              * @param {Ext.form.Field} this
 182              * @param {String} msg The validation message
 183              */
 184             'invalid',
 185             <div id="event-Ext.form.Field-valid"></div>/**
 186              * @event valid
 187              * Fires after the field has been validated with no errors.
 188              * @param {Ext.form.Field} this
 189              */
 190             'valid'
 191         );
 192     },
 193
 194     <div id="method-Ext.form.Field-getName"></div>/**
 195      * Returns the {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
 196      * attribute of the field if available.
 197      * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
 198      */
 199     getName: function(){
 200         return this.rendered && this.el.dom.name ? this.el.dom.name : this.name || this.id || '';
 201     },
 202
 203     // private
 204     onRender : function(ct, position){
 205         if(!this.el){
 206             var cfg = this.getAutoCreate();
 207
 208             if(!cfg.name){
 209                 cfg.name = this.name || this.id;
 210             }
 211             if(this.inputType){
 212                 cfg.type = this.inputType;
 213             }
 214             this.autoEl = cfg;
 215         }
 216         Ext.form.Field.superclass.onRender.call(this, ct, position);
 217
 218         var type = this.el.dom.type;
 219         if(type){
 220             if(type == 'password'){
 221                 type = 'text';
 222             }
 223             this.el.addClass('x-form-'+type);
 224         }
 225         if(this.readOnly){
 226             this.el.dom.readOnly = true;
 227         }
 228         if(this.tabIndex !== undefined){
 229             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 230         }
 231
 232         this.el.addClass([this.fieldClass, this.cls]);
 233     },
 234
 235     // private
 236     getItemCt : function(){
 237         return this.el.up('.x-form-item', 4);
 238     },
 239
 240     // private
 241     initValue : function(){
 242         if(this.value !== undefined){
 243             this.setValue(this.value);
 244         }else if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText){
 245             this.setValue(this.el.dom.value);
 246         }
 247         <div id="prop-Ext.form.Field-originalValue"></div>/**
 248          * The original value of the field as configured in the {@link #value} configuration, or
 249          * as loaded by the last form load operation if the form's {@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
 250          * setting is <code>true</code>.
 251          * @type mixed
 252          * @property originalValue
 253          */
 254         this.originalValue = this.getValue();
 255     },
 256
 257     <div id="method-Ext.form.Field-isDirty"></div>/**
 258      * <p>Returns true if the value of this Field has been changed from its original value.
 259      * Will return false if the field is disabled or has not been rendered yet.</p>
 260      * <p>Note that if the owning {@link Ext.form.BasicForm form} was configured with
 261      * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
 262      * then the <i>original value</i> is updated when the values are loaded by
 263      * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#setValues setValues}.</p>
 264      * @return {Boolean} True if this field has been changed from its original value (and
 265      * is not disabled), false otherwise.
 266      */
 267     isDirty : function() {
 268         if(this.disabled || !this.rendered) {
 269             return false;
 270         }
 271         return String(this.getValue()) !== String(this.originalValue);
 272     },
 273
 274     // private
 275     afterRender : function(){
 276         Ext.form.Field.superclass.afterRender.call(this);
 277         this.initEvents();
 278         this.initValue();
 279     },
 280
 281     // private
 282     fireKey : function(e){
 283         if(e.isSpecialKey()){
 284             this.fireEvent("specialkey", this, e);
 285         }
 286     },
 287
 288     <div id="method-Ext.form.Field-reset"></div>/**
 289      * Resets the current field value to the originally loaded value and clears any validation messages.
 290      * See {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}
 291      */
 292     reset : function(){
 293         this.setValue(this.originalValue);
 294         this.clearInvalid();
 295     },
 296
 297     // private
 298     initEvents : function(){
 299         this.mon(this.el, Ext.EventManager.useKeydown ? "keydown" : "keypress", this.fireKey,  this);
 300         this.mon(this.el, 'focus', this.onFocus, this);
 301
 302         // fix weird FF/Win editor issue when changing OS window focus
 303         var o = this.inEditor && Ext.isWindows && Ext.isGecko ? {buffer:10} : null;
 304         this.mon(this.el, 'blur', this.onBlur, this, o);
 305     },
 306
 307     // private
 308     onFocus : function(){
 309         if(this.focusClass){
 310             this.el.addClass(this.focusClass);
 311         }
 312         if(!this.hasFocus){
 313             this.hasFocus = true;
 314             this.startValue = this.getValue();
 315             this.fireEvent("focus", this);
 316         }
 317     },
 318
 319     // private
 320     beforeBlur : Ext.emptyFn,
 321
 322     // private
 323     onBlur : function(){
 324         this.beforeBlur();
 325         if(this.focusClass){
 326             this.el.removeClass(this.focusClass);
 327         }
 328         this.hasFocus = false;
 329         if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){
 330             this.validate();
 331         }
 332         var v = this.getValue();
 333         if(String(v) !== String(this.startValue)){
 334             this.fireEvent('change', this, v, this.startValue);
 335         }
 336         this.fireEvent("blur", this);
 337     },
 338
 339     <div id="method-Ext.form.Field-isValid"></div>/**
 340      * Returns whether or not the field value is currently valid
 341      * @param {Boolean} preventMark True to disable marking the field invalid
 342      * @return {Boolean} True if the value is valid, else false
 343      */
 344     isValid : function(preventMark){
 345         if(this.disabled){
 346             return true;
 347         }
 348         var restore = this.preventMark;
 349         this.preventMark = preventMark === true;
 350         var v = this.validateValue(this.processValue(this.getRawValue()));
 351         this.preventMark = restore;
 352         return v;
 353     },
 354
 355     <div id="method-Ext.form.Field-validate"></div>/**
 356      * Validates the field value
 357      * @return {Boolean} True if the value is valid, else false
 358      */
 359     validate : function(){
 360         if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
 361             this.clearInvalid();
 362             return true;
 363         }
 364         return false;
 365     },
 366
 367     // protected - should be overridden by subclasses if necessary to prepare raw values for validation
 368     processValue : function(value){
 369         return value;
 370     },
 371
 372     // private
 373     // Subclasses should provide the validation implementation by overriding this
 374     validateValue : function(value){
 375         return true;
 376     },
 377
 378     <div id="method-Ext.form.Field-markInvalid"></div>/**
 379      * Mark this field as invalid, using {@link #msgTarget} to determine how to display the error and
 380      * applying {@link #invalidClass} to the field's element.
 381      * @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
 382      */
 383     markInvalid : function(msg){
 384         if(!this.rendered || this.preventMark){ // not rendered
 385             return;
 386         }
 387         msg = msg || this.invalidText;
 388
 389         var mt = this.getMessageHandler();
 390         if(mt){
 391             mt.mark(this, msg);
 392         }else if(this.msgTarget){
 393             this.el.addClass(this.invalidClass);
 394             var t = Ext.getDom(this.msgTarget);
 395             if(t){
 396                 t.innerHTML = msg;
 397                 t.style.display = this.msgDisplay;
 398             }
 399         }
 400         this.fireEvent('invalid', this, msg);
 401     },
 402
 403     <div id="method-Ext.form.Field-clearInvalid"></div>/**
 404      * Clear any invalid styles/messages for this field
 405      */
 406     clearInvalid : function(){
 407         if(!this.rendered || this.preventMark){ // not rendered
 408             return;
 409         }
 410         this.el.removeClass(this.invalidClass);
 411         var mt = this.getMessageHandler();
 412         if(mt){
 413             mt.clear(this);
 414         }else if(this.msgTarget){
 415             this.el.removeClass(this.invalidClass);
 416             var t = Ext.getDom(this.msgTarget);
 417             if(t){
 418                 t.innerHTML = '';
 419                 t.style.display = 'none';
 420             }
 421         }
 422         this.fireEvent('valid', this);
 423     },
 424
 425     // private
 426     getMessageHandler : function(){
 427         return Ext.form.MessageTargets[this.msgTarget];
 428     },
 429
 430     // private
 431     getErrorCt : function(){
 432         return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
 433             this.el.findParent('.x-form-field-wrap', 5, true);   // else direct field wrap
 434     },
 435
 436     // private
 437     alignErrorIcon : function(){
 438         this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
 439     },
 440
 441     <div id="method-Ext.form.Field-getRawValue"></div>/**
 442      * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
 443      * @return {Mixed} value The field value
 444      */
 445     getRawValue : function(){
 446         var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
 447         if(v === this.emptyText){
 448             v = '';
 449         }
 450         return v;
 451     },
 452
 453     <div id="method-Ext.form.Field-getValue"></div>/**
 454      * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
 455      * @return {Mixed} value The field value
 456      */
 457     getValue : function(){
 458         if(!this.rendered) {
 459             return this.value;
 460         }
 461         var v = this.el.getValue();
 462         if(v === this.emptyText || v === undefined){
 463             v = '';
 464         }
 465         return v;
 466     },
 467
 468     <div id="method-Ext.form.Field-setRawValue"></div>/**
 469      * Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.
 470      * @param {Mixed} value The value to set
 471      * @return {Mixed} value The field value that is set
 472      */
 473     setRawValue : function(v){
 474         return (this.el.dom.value = (Ext.isEmpty(v) ? '' : v));
 475     },
 476
 477     <div id="method-Ext.form.Field-setValue"></div>/**
 478      * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
 479      * @param {Mixed} value The value to set
 480      * @return {Ext.form.Field} this
 481      */
 482     setValue : function(v){
 483         this.value = v;
 484         if(this.rendered){
 485             this.el.dom.value = (Ext.isEmpty(v) ? '' : v);
 486             this.validate();
 487         }
 488         return this;
 489     },
 490
 491     // private, does not work for all fields
 492     append : function(v){
 493          this.setValue([this.getValue(), v].join(''));
 494     },
 495
 496     // private
 497     adjustSize : function(w, h){
 498         var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);
 499         s.width = this.adjustWidth(this.el.dom.tagName, s.width);
 500         if(this.offsetCt){
 501             var ct = this.getItemCt();
 502             s.width -= ct.getFrameWidth('lr');
 503             s.height -= ct.getFrameWidth('tb');
 504         }
 505         return s;
 506     },
 507
 508     // private
 509     adjustWidth : function(tag, w){
 510         if(typeof w == 'number' && (Ext.isIE && (Ext.isIE6 || !Ext.isStrict)) && /input|textarea/i.test(tag) && !this.inEditor){
 511             return w - 3;
 512         }
 513         return w;
 514     }
 515
 516     <div id="cfg-Ext.form.Field-autoWidth"></div>/**
 517      * @cfg {Boolean} autoWidth @hide
 518      */
 519     <div id="cfg-Ext.form.Field-autoHeight"></div>/**
 520      * @cfg {Boolean} autoHeight @hide
 521      */
 522
 523     <div id="cfg-Ext.form.Field-autoEl"></div>/**
 524      * @cfg {String} autoEl @hide
 525      */
 526 });
 527
 528
 529 Ext.form.MessageTargets = {
 530     'qtip' : {
 531         mark: function(field, msg){
 532             field.el.addClass(field.invalidClass);
 533             field.el.dom.qtip = msg;
 534             field.el.dom.qclass = 'x-form-invalid-tip';
 535             if(Ext.QuickTips){ // fix for floating editors interacting with DND
 536                 Ext.QuickTips.enable();
 537             }
 538         },
 539         clear: function(field){
 540             field.el.removeClass(field.invalidClass);
 541             field.el.dom.qtip = '';
 542         }
 543     },
 544     'title' : {
 545         mark: function(field, msg){
 546             field.el.addClass(field.invalidClass);
 547             field.el.dom.title = msg;
 548         },
 549         clear: function(field){
 550             field.el.dom.title = '';
 551         }
 552     },
 553     'under' : {
 554         mark: function(field, msg){
 555             field.el.addClass(field.invalidClass);
 556             if(!field.errorEl){
 557                 var elp = field.getErrorCt();
 558                 if(!elp){ // field has no container el
 559                     field.el.dom.title = msg;
 560                     return;
 561                 }
 562                 field.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
 563                 field.errorEl.setWidth(elp.getWidth(true)-20);
 564             }
 565             field.errorEl.update(msg);
 566             Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field);
 567         },
 568         clear: function(field){
 569             field.el.removeClass(field.invalidClass);
 570             if(field.errorEl){
 571                 Ext.form.Field.msgFx[field.msgFx].hide(field.errorEl, field);
 572             }else{
 573                 field.el.dom.title = '';
 574             }
 575         }
 576     },
 577     'side' : {
 578         mark: function(field, msg){
 579             field.el.addClass(field.invalidClass);
 580             if(!field.errorIcon){
 581                 var elp = field.getErrorCt();
 582                 if(!elp){ // field has no container el
 583                     field.el.dom.title = msg;
 584                     return;
 585                 }
 586                 field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
 587             }
 588             field.alignErrorIcon();
 589             field.errorIcon.dom.qtip = msg;
 590             field.errorIcon.dom.qclass = 'x-form-invalid-tip';
 591             field.errorIcon.show();
 592             field.on('resize', field.alignErrorIcon, field);
 593         },
 594         clear: function(field){
 595             field.el.removeClass(field.invalidClass);
 596             if(field.errorIcon){
 597                 field.errorIcon.dom.qtip = '';
 598                 field.errorIcon.hide();
 599                 field.un('resize', field.alignErrorIcon, field);
 600             }else{
 601                 field.el.dom.title = '';
 602             }
 603         }
 604     }
 605 };
 606
 607 // anything other than normal should be considered experimental
 608 Ext.form.Field.msgFx = {
 609     normal : {
 610         show: function(msgEl, f){
 611             msgEl.setDisplayed('block');
 612         },
 613
 614         hide : function(msgEl, f){
 615             msgEl.setDisplayed(false).update('');
 616         }
 617     },
 618
 619     slide : {
 620         show: function(msgEl, f){
 621             msgEl.slideIn('t', {stopFx:true});
 622         },
 623
 624         hide : function(msgEl, f){
 625             msgEl.slideOut('t', {stopFx:true,useDisplay:true});
 626         }
 627     },
 628
 629     slideRight : {
 630         show: function(msgEl, f){
 631             msgEl.fixDisplay();
 632             msgEl.alignTo(f.el, 'tl-tr');
 633             msgEl.slideIn('l', {stopFx:true});
 634         },
 635
 636         hide : function(msgEl, f){
 637             msgEl.slideOut('l', {stopFx:true,useDisplay:true});
 638         }
 639     }
 640 };
 641 Ext.reg('field', Ext.form.Field);
 642 </pre>    \r
 643 </body>\r
 644 </html>