/*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** + + + +The source code + + + + +/** * @class Ext.form.Field * @extends Ext.BoxComponent * Base class for form fields that provides default event handling, sizing, value handling and other functionality. @@ -21,6 +16,12 @@ * @xtype field */ Ext.form.Field = Ext.extend(Ext.BoxComponent, { + /** + *The label Element associated with this Field. Only available after this Field has been rendered by a + * {@link form Ext.layout.FormLayout} layout manager.
+ * @type Ext.Element + * @property label + */ /** * @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 @@ -86,18 +87,17 @@ Ext.form.Field = Ext.extend(Ext.BoxComponent, { * @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'): - *-Value Description ------------ ---------------------------------------------------------------------- -qtip Display a quick tip when the user hovers over the field -title Display a default browser title attribute popup -under Add a block div beneath the field containing the error text -side 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 -+ /** + * @cfg {String} msgTargetThe location where the message text set through {@link #markInvalid} should display. + * Must be one of the following values:
+ *+ *
qtipDisplay a quick tip containing the message when the user hovers over the field. This is the default. + *{@link Ext.QuickTips#init Ext.QuickTips.init} must have been called for this setting to work. + **/ msgTarget : 'qtip', /** @@ -121,6 +121,11 @@ side Add an error icon to the right of the field with a popup on hover * disabled Fields will not be {@link Ext.form.BasicForm#submit submitted}. */ disabled : false, + /** + * @cfg {Boolean} submitValue False to clear the name attribute on the field so that it is not submitted during a form post. + * Defaults to true. + */ + submitValue: true, // private isFormField : true, @@ -228,7 +233,9 @@ var form = new Ext.form.FormPanel({ this.autoEl = cfg; } Ext.form.Field.superclass.onRender.call(this, ct, position); - + if(this.submitValue === false){ + this.el.dom.removeAttribute('name'); + } var type = this.el.dom.type; if(type){ if(type == 'password'){ @@ -237,7 +244,7 @@ var form = new Ext.form.FormPanel({ this.el.addClass('x-form-'+type); } if(this.readOnly){ - this.el.dom.readOnly = true; + this.setReadOnly(true); } if(this.tabIndex !== undefined){ this.el.dom.setAttribute('tabIndex', this.tabIndex); @@ -285,6 +292,17 @@ var form = new Ext.form.FormPanel({ return String(this.getValue()) !== String(this.originalValue); }, + /** + * Sets the read only state of this field. + * @param {Boolean} readOnly Whether the field should be read only. + */ + setReadOnly : function(readOnly){ + if(this.rendered){ + this.el.dom.readOnly = readOnly; + } + this.readOnly = readOnly; + }, + // private afterRender : function(){ Ext.form.Field.superclass.afterRender.call(this); @@ -329,6 +347,13 @@ var form = new Ext.form.FormPanel({ } if(!this.hasFocus){ this.hasFocus = true; + /** + *- + *
titleDisplay the message in a default browser title attribute popup.- + *
underAdd a block div beneath the field containing the error message.- + *
sideAdd an error icon to the right of the field, displaying the message in a popup on hover.- + *
[element id]Add the error message directly to the innerHTML of the specified element.The value that the Field had at the time it was last focused. This is the value that is passed + * to the {@link #change} event which is fired if the value has been changed when the Field is blurred.
+ *This will be undefined until the Field has been visited. Compare {@link #originalValue}.
+ * @type mixed + * @property startValue + */ this.startValue = this.getValue(); this.fireEvent('focus', this); } @@ -344,7 +369,7 @@ var form = new Ext.form.FormPanel({ this.el.removeClass(this.focusClass); } this.hasFocus = false; - if(this.validationEvent !== false && (this.validateOnBlur || this.validationEvent != 'blur')){ + if(this.validationEvent !== false && (this.validateOnBlur || this.validationEvent == 'blur')){ this.validate(); } var v = this.getValue(); @@ -408,10 +433,20 @@ var form = new Ext.form.FormPanel({ return true; }, + /** + * Gets the active error message for this field. + * @return {String} Returns the active error message on the field, if there is no error, an empty string is returned. + */ + getActiveError : function(){ + return this.activeError || ''; + }, + /** - * Mark this field as invalid, using {@link #msgTarget} to determine how to - * display the error and applying {@link #invalidClass} to the field's element. - * Note: this method does not actually make the field + *Display an error message associated with this field, using {@link #msgTarget} to determine how to + * display the message and applying {@link #invalidClass} to the field's UI element.
+ *Note: this method does not cause the Field's {@link #validate} method to return
* {@link #isValid invalid}. * @param {String} msg (optional) The validation message (defaults to {@link #invalidText}) */ @@ -432,6 +467,7 @@ var form = new Ext.form.FormPanel({ t.style.display = this.msgDisplay; } } + this.activeError = msg; this.fireEvent('invalid', this, msg); }, @@ -454,6 +490,7 @@ var form = new Ext.form.FormPanel({ t.style.display = 'none'; } } + delete this.activeError; this.fireEvent('valid', this); }, @@ -468,7 +505,12 @@ var form = new Ext.form.FormPanel({ this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap }, - // private + // Alignment for 'under' target + alignErrorEl : function(){ + this.errorEl.setWidth(this.getErrorCt().getWidth(true) - 20); + }, + + // Alignment for 'side' target alignErrorIcon : function(){ this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]); }, @@ -575,8 +617,12 @@ Ext.form.MessageTargets = { return; } field.errorEl = elp.createChild({cls:'x-form-invalid-msg'}); - field.errorEl.setWidth(elp.getWidth(true)-20); + field.on('resize', field.alignErrorEl, field); + field.on('destroy', function(){ + Ext.destroy(this.errorEl); + }, field); } + field.alignErrorEl(); field.errorEl.update(msg); Ext.form.Field.msgFx[field.msgFx].show(field.errorEl, field); }, @@ -599,19 +645,21 @@ Ext.form.MessageTargets = { return; } field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); + field.on('resize', field.alignErrorIcon, field); + field.on('destroy', function(){ + Ext.destroy(this.errorIcon); + }, field); } field.alignErrorIcon(); field.errorIcon.dom.qtip = msg; field.errorIcon.dom.qclass = 'x-form-invalid-tip'; field.errorIcon.show(); - field.on('resize', field.alignErrorIcon, field); }, clear: function(field){ field.el.removeClass(field.invalidClass); if(field.errorIcon){ field.errorIcon.dom.qtip = ''; field.errorIcon.hide(); - field.un('resize', field.alignErrorIcon, field); }else{ field.el.dom.title = ''; } @@ -654,6 +702,6 @@ Ext.form.Field.msgFx = { } }; Ext.reg('field', Ext.form.Field); - - + + \ No newline at end of filefalse+ * if the value does pass validation. So simply marking a Field as invalid will not prevent + * submission of forms submitted with the {@link Ext.form.Action.Submit#clientValidation} option set.