/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
*/
/**
* @class Ext.form.Field
@@ -21,6 +22,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
@@ -87,17 +94,16 @@ Ext.form.Field = Ext.extend(Ext.BoxComponent, {
*/
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} msgTarget The location where the message text set through {@link #markInvalid} should display.
+ * Must be one of the following values:
+ *
+ * qtip Display 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.
+ * title Display the message in a default browser title attribute popup.under Add a block div beneath the field containing the error message.side Add 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 +375,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();
@@ -399,62 +430,117 @@ var form = new Ext.form.FormPanel({
return value;
},
- /**
- * @private
- * Subclasses should provide the validation implementation by overriding this
- * @param {Mixed} value
+ /**
+ * Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called
+ * with the first and false is returned, otherwise true is returned. Previously, subclasses were invited
+ * to provide an implementation of this to process validations - from 3.2 onwards getErrors should be
+ * overridden instead.
+ * @param {Mixed} The current value of the field
+ * @return {Boolean} True if all validations passed, false if one or more failed
+ */
+ validateValue : function(value) {
+ //currently, we only show 1 error at a time for a field, so just use the first one
+ var error = this.getErrors(value)[0];
+
+ if (error == undefined) {
+ return true;
+ } else {
+ this.markInvalid(error);
+ return false;
+ }
+ },
+
+ /**
+ * Runs this field's validators and returns an array of error messages for any validation failures.
+ * This is called internally during validation and would not usually need to be used manually.
+ * Each subclass should override or augment the return value to provide their own errors
+ * @return {Array} All error messages for this field
+ */
+ getErrors: function() {
+ return [];
+ },
+
+ /**
+ * 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.
*/
- validateValue : function(value){
- return true;
+ 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 false
+ * 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.
* {@link #isValid invalid}.
* @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
*/
markInvalid : function(msg){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- msg = msg || this.invalidText;
-
- var mt = this.getMessageHandler();
- if(mt){
- mt.mark(this, msg);
- }else if(this.msgTarget){
- this.el.addClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = msg;
- t.style.display = this.msgDisplay;
+ //don't set the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
+ msg = msg || this.invalidText;
+
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.mark(this, msg);
+ }else if(this.msgTarget){
+ this.el.addClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ }
}
}
- this.fireEvent('invalid', this, msg);
+
+ this.setActiveError(msg);
},
-
+
/**
* Clear any invalid styles/messages for this field
*/
clearInvalid : function(){
- if(!this.rendered || this.preventMark){ // not rendered
- return;
- }
- this.el.removeClass(this.invalidClass);
- var mt = this.getMessageHandler();
- if(mt){
- mt.clear(this);
- }else if(this.msgTarget){
+ //don't remove the error icon if we're not rendered or marking is prevented
+ if (this.rendered && !this.preventMark) {
this.el.removeClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = '';
- t.style.display = 'none';
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.clear(this);
+ }else if(this.msgTarget){
+ this.el.removeClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = '';
+ t.style.display = 'none';
+ }
}
}
- this.fireEvent('valid', this);
+
+ this.unsetActiveError();
+ },
+
+ /**
+ * Sets the current activeError to the given string. Fires the 'invalid' event.
+ * This does not set up the error icon, only sets the message and fires the event. To show the error icon,
+ * use markInvalid instead, which calls this method internally
+ * @param {String} msg The error message
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ setActiveError: function(msg, suppressEvent) {
+ this.activeError = msg;
+ if (suppressEvent !== true) this.fireEvent('invalid', this, msg);
+ },
+
+ /**
+ * Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not
+ * usually need to be called manually
+ * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired
+ */
+ unsetActiveError: function(suppressEvent) {
+ delete this.activeError;
+ if (suppressEvent !== true) this.fireEvent('valid', this);
},
// private
@@ -468,7 +554,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 +666,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);
},
@@ -594,24 +689,31 @@ Ext.form.MessageTargets = {
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
- if(!elp){ // field has no container el
+ // field has no container el
+ if(!elp){
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+ if (field.ownerCt) {
+ field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
+ field.ownerCt.on('expand', field.alignErrorIcon, field);
+ }
+ 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 +756,6 @@ Ext.form.Field.msgFx = {
}
};
Ext.reg('field', Ext.form.Field);
-
+
\ No newline at end of file