docs/source/Field.html

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