Upgrade to ExtJS 3.3.1 - Released 11/30/2010

[extjs.git] / docs / source / Field.html
diff --git a/docs/source/Field.html b/docs/source/Field.html

index 874066c..10a115b 100644 (file)
--- a/docs/source/Field.html
+++ b/docs/source/Field.html
@@ -1,12 +1,18 @@
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.form.Field"></div>/**
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.form.Field"></div>/**
   * @class Ext.form.Field
   * @extends Ext.BoxComponent
   * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
   * @class Ext.form.Field
   * @extends Ext.BoxComponent
   * Base class for form fields that provides default event handling, sizing, value handling and other functionality.
@@ -87,8 +93,8 @@ 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} fieldClass The default CSS class for the field (defaults to 'x-form-field')
       */
      fieldClass : 'x-form-field',
-    <div id="cfg-Ext.form.Field-msgTarget<p>The"></div>/**
-     * @cfg {String} msgTarget<p>The location where the message text set through {@link #markInvalid} should display.
+    <div id="cfg-Ext.form.Field-msgTarget"></div>/**
+     * @cfg {String} msgTarget <p>The location where the message text set through {@link #markInvalid} should display.
       * Must be one of the following values:</p>
       * <div class="mdetail-params"><ul>
       * <li><code>qtip</code> Display a quick tip containing the message when the user hovers over the field. This is the default.
       * Must be one of the following values:</p>
       * <div class="mdetail-params"><ul>
       * <li><code>qtip</code> Display a quick tip containing the message when the user hovers over the field. This is the default.
@@ -328,7 +334,7 @@ var form = new Ext.form.FormPanel({
  
      // private
      initEvents : function(){
  
      // private
      initEvents : function(){
-        this.mon(this.el, Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.fireKey,  this);
+        this.mon(this.el, Ext.EventManager.getKeyEvent(), this.fireKey,  this);
          this.mon(this.el, 'focus', this.onFocus, this);
  
          // standardise buffer across all browsers + OS-es for consistent event order.
          this.mon(this.el, 'focus', this.onFocus, this);
  
          // standardise buffer across all browsers + OS-es for consistent event order.
@@ -424,13 +430,34 @@ var form = new Ext.form.FormPanel({
          return value;
      },
  
          return value;
      },
  
-    /**
-     * @private
-     * Subclasses should provide the validation implementation by overriding this
-     * @param {Mixed} value
-     */
-    validateValue : function(value){
-        return true;
+    <div id="method-Ext.form.Field-validateValue"></div>/**
+     * 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;
+         }
+     },
+    
+    <div id="method-Ext.form.Field-getErrors"></div>/**
+     * 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 [];
      },
  
      <div id="method-Ext.form.Field-getActiveError"></div>/**
      },
  
      <div id="method-Ext.form.Field-getActiveError"></div>/**
@@ -451,47 +478,69 @@ var form = new Ext.form.FormPanel({
       * @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
       */
      markInvalid : function(msg){
       * @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.activeError = msg;
-        this.fireEvent('invalid', this, msg);
+        
+        this.setActiveError(msg);
      },
      },
-
+    
      <div id="method-Ext.form.Field-clearInvalid"></div>/**
       * Clear any invalid styles/messages for this field
       */
      clearInvalid : function(){
      <div id="method-Ext.form.Field-clearInvalid"></div>/**
       * 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);
              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.unsetActiveError();
+    },
+
+    <div id="method-Ext.form.Field-setActiveError"></div>/**
+     * 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);
+    },
+    
+    <div id="method-Ext.form.Field-unsetActiveError"></div>/**
+     * 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;
          delete this.activeError;
-        this.fireEvent('valid', this);
+        if (suppressEvent !== true) this.fireEvent('valid', this);
      },
  
      // private
      },
  
      // private
@@ -640,11 +689,16 @@ Ext.form.MessageTargets = {
              field.el.addClass(field.invalidClass);
              if(!field.errorIcon){
                  var elp = field.getErrorCt();
              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'});
                      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.on('resize', field.alignErrorIcon, field);
                  field.on('destroy', function(){
                      Ext.destroy(this.errorIcon);
@@ -702,6 +756,6 @@ Ext.form.Field.msgFx = {
      }
  };
  Ext.reg('field', Ext.form.Field);
      }
  };
  Ext.reg('field', Ext.form.Field);
-</pre>    \r
-</body>\r
+</pre>    
+</body>
  </html>
 \ No newline at end of file
  </html>
 \ No newline at end of file