/*
 * Ext JS Library 3.0 Pre-alpha
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/** * @class Ext.form.Field * @extends Ext.BoxComponent * Base class for form fields that provides default event handling, sizing, value handling and other functionality. * @constructor * Creates a new Field * @param {Object} config Configuration options * @xtype field */Ext.form.Field = Ext.extend(Ext.BoxComponent,  {    /**     * @cfg {String} fieldLabel The label text to display next to this field (defaults to '')     * <p><b>A Field's label is not by default rendered as part of the Field's structure.     * The label is rendered by the {@link Ext.layout.FormLayout form layout} layout manager     * of the {@link Ext.form.Container Container} to which the Field is added.</b></p>     */    /**     * @cfg {String} inputType The type attribute for input fields -- e.g. radio, text, password, file (defaults     * to "text"). The types "file" and "password" must be used to render those field types currently -- there are     * no separate Ext components for those. Note that if you use <tt>inputType:'file'</tt>, {@link #emptyText}     * is not supported and should be avoided.     */    /**     * @cfg {Number} tabIndex The tabIndex for this field. Note this only applies to fields that are rendered,     * not those which are built via applyTo (defaults to undefined).     */    /**     * @cfg {Mixed} value A value to initialize this field with (defaults to undefined).     */    /**     * @cfg {String} name The field's HTML name attribute (defaults to "").     */    /**     * @cfg {String} cls A custom CSS class to apply to the field's underlying element (defaults to "").     */    /**     * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")     */    invalidClass : "x-form-invalid",    /**     * @cfg {String} invalidText The error text to use when marking a field invalid and no message is provided     * (defaults to "The value in this field is invalid")     */    invalidText : "The value in this field is invalid",    /**     * @cfg {String} focusClass The CSS class to use when the field receives focus (defaults to "x-form-focus")     */    focusClass : "x-form-focus",    /**     * @cfg {String/Boolean} validationEvent The event that should initiate field validation. Set to false to disable      automatic validation (defaults to "keyup").     */    validationEvent : "keyup",    /**     * @cfg {Boolean} validateOnBlur Whether the field should validate when it loses focus (defaults to true).     */    validateOnBlur : true,    /**     * @cfg {Number} validationDelay The length of time in milliseconds after user input begins until validation     * is initiated (defaults to 250)     */    validationDelay : 250,    /**     * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default     * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.     * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details.  Defaults to:</p>     * <pre><code>{tag: "input", type: "text", size: "20", autocomplete: "off"}</code></pre>     */    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},    /**     * @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field")     */    fieldClass : "x-form-field",    /**     * @cfg {String} msgTarget The location where error text should display.  Should be one of the following values     * (defaults to 'qtip'):     *<pre>Value         Description-----------   ----------------------------------------------------------------------qtip          Display a quick tip when the user hovers over the fieldtitle         Display a default browser title attribute popupunder         Add a block div beneath the field containing the error textside          Add an error icon to the right of the field with a popup on hover[element id]  Add the error text directly to the innerHTML of the specified element</pre>     */    msgTarget : 'qtip',    /**     * @cfg {String} msgFx <b>Experimental</b> The effect used when displaying a validation message under the field     * (defaults to 'normal').     */    msgFx : 'normal',    /**     * @cfg {Boolean} readOnly True to mark the field as readOnly in HTML (defaults to false) -- Note: this only     * sets the element's readOnly DOM attribute.     */    readOnly : false,    /**     * @cfg {Boolean} disabled True to disable the field (defaults to false).     * <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>,     * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}.</p>     */    disabled : false,    // private    isFormField : true,    // private    hasFocus : false,	// private	initComponent : function(){        Ext.form.Field.superclass.initComponent.call(this);        this.addEvents(            /**             * @event focus             * Fires when this field receives input focus.             * @param {Ext.form.Field} this             */            'focus',            /**             * @event blur             * Fires when this field loses input focus.             * @param {Ext.form.Field} this             */            'blur',            /**             * @event specialkey             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.             * To handle other keys see {@link Ext.Panel#keys} or {@link Ext.KeyMap}.             * You can check {@link Ext.EventObject#getKey} to determine which key was pressed.             * For example: <pre><code>var form = new Ext.form.FormPanel({    ...    items: [{            fieldLabel: 'Field 1',            name: 'field1',            allowBlank: false        },{            fieldLabel: 'Field 2',            name: 'field2',            listeners: {                specialkey: function(field, e){                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN                    if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {                        var form = field.ownerCt.getForm();                        form.submit();                    }                }            }        }    ],    ...});             * </code></pre>             * @param {Ext.form.Field} this             * @param {Ext.EventObject} e The event object             */            'specialkey',            /**             * @event change             * Fires just before the field blurs if the field value has changed.             * @param {Ext.form.Field} this             * @param {Mixed} newValue The new value             * @param {Mixed} oldValue The original value             */            'change',            /**             * @event invalid             * Fires after the field has been marked as invalid.             * @param {Ext.form.Field} this             * @param {String} msg The validation message             */            'invalid',            /**             * @event valid             * Fires after the field has been validated with no errors.             * @param {Ext.form.Field} this             */            'valid'        );    },    /**     * Returns the {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}     * attribute of the field if available.     * @return {String} name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}       */    getName: function(){         return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');    },    // private    onRender : function(ct, position){        if(!this.el){            var cfg = this.getAutoCreate();            if(!cfg.name){                cfg.name = this.name || this.id;            }            if(this.inputType){                cfg.type = this.inputType;            }            this.autoEl = cfg;        }        Ext.form.Field.superclass.onRender.call(this, ct, position);                var type = this.el.dom.type;        if(type){            if(type == 'password'){                type = 'text';            }            this.el.addClass('x-form-'+type);        }        if(this.readOnly){            this.el.dom.readOnly = true;        }        if(this.tabIndex !== undefined){            this.el.dom.setAttribute('tabIndex', this.tabIndex);        }        this.el.addClass([this.fieldClass, this.cls]);    },    // private    getItemCt : function(){        return this.el.up('.x-form-item', 4);    },    // private    initValue : function(){        if(this.value !== undefined){            this.setValue(this.value);        }else if(!Ext.isEmpty(this.el.dom.value) && this.el.dom.value != this.emptyText){            this.setValue(this.el.dom.value);        }        // reference to original value for reset        this.originalValue = this.getValue();    },    /**     * <p>Returns true if the value of this Field has been changed from its original value,     * and is not disabled.</p>     * <p>Note that if the owning {@link Ext.form.BasicForm form} was configured with     * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}     * then the <i>original value</i> is updated when the values are loaded by     * {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#setValues setValues}.</p>     * @return {Boolean} True if this field has been changed from its original value (and     * is not disabled), false otherwise.     */    isDirty : function() {        if(this.disabled) {            return false;        }        return String(this.getValue()) !== String(this.originalValue);    },    // private    afterRender : function(){        Ext.form.Field.superclass.afterRender.call(this);        this.initEvents();        this.initValue();    },    // private    fireKey : function(e){        if(e.isSpecialKey()){            this.fireEvent("specialkey", this, e);        }    },    /**     * Resets the current field value to the originally loaded value and clears any validation messages.     * See {@link Ext.form.BasicForm}.{@link Ext.form.BasicForm#trackResetOnLoad trackResetOnLoad}     */    reset : function(){        this.setValue(this.originalValue);        this.clearInvalid();    },    // private    initEvents : function(){    	this.mon(this.el, Ext.isIE || Ext.isSafari3 || Ext.isChrome ? "keydown" : "keypress", this.fireKey,  this);		this.mon(this.el, 'focus', this.onFocus, this);        // fix weird FF/Win editor issue when changing OS window focus        var o = this.inEditor && Ext.isWindows && Ext.isGecko ? {buffer:10} : null;        this.mon(this.el, 'blur', this.onBlur, this, o);    },    // private    onFocus : function(){        if(this.focusClass){            this.el.addClass(this.focusClass);        }        if(!this.hasFocus){            this.hasFocus = true;            this.startValue = this.getValue();            this.fireEvent("focus", this);        }    },    // private    beforeBlur : Ext.emptyFn,    // private    onBlur : function(){        this.beforeBlur();        if(this.focusClass){            this.el.removeClass(this.focusClass);        }        this.hasFocus = false;        if(this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur"){            this.validate();        }        var v = this.getValue();        if(String(v) !== String(this.startValue)){