X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/Basic.html diff --git a/docs/source/Basic.html b/docs/source/Basic.html index 7492a942..3aa13eee 100644 --- a/docs/source/Basic.html +++ b/docs/source/Basic.html @@ -1,87 +1,103 @@ -Sencha Documentation Project
/**
- * @class Ext.form.Basic
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * @class Ext.form.Basic
  * @extends Ext.util.Observable
-
-Provides input field management, validation, submission, and form loading services for the collection
-of {@link Ext.form.field.Field Field} instances within a {@link Ext.container.Container}. It is recommended
-that you use a {@link Ext.form.Panel} as the form container, as that has logic to automatically
-hook up an instance of {@link Ext.form.Basic} (plus other conveniences related to field configuration.)
-
-#Form Actions#
-
-The Basic class delegates the handling of form loads and submits to instances of {@link Ext.form.action.Action}.
-See the various Action implementations for specific details of each one's functionality, as well as the
-documentation for {@link #doAction} which details the configuration options that can be specified in
-each action call.
-
-The default submit Action is {@link Ext.form.action.Submit}, which uses an Ajax request to submit the
-form's values to a configured URL. To enable normal browser submission of an Ext form, use the
-{@link #standardSubmit} config option.
-
-Note: File uploads are not performed using normal 'Ajax' techniques; see the description for
-{@link #hasUpload} for details.
-
-#Example usage:#
-
-    Ext.create('Ext.form.Panel', {
-        title: 'Basic Form',
-        renderTo: Ext.getBody(),
-        bodyPadding: 5,
-        width: 350,
-
-        // Any configuration items here will be automatically passed along to
-        // the Ext.form.Basic instance when it gets created.
-
-        // The form will submit an AJAX request to this URL when submitted
-        url: 'save-form.php',
-
-        items: [{
-            fieldLabel: 'Field',
-            name: 'theField'
-        }],
-
-        buttons: [{
-            text: 'Submit',
-            handler: function() {
-                // The getForm() method returns the Ext.form.Basic instance:
-                var form = this.up('form').getForm();
-                if (form.isValid()) {
-                    // Submit the Ajax request and handle the response
-                    form.submit({
-                        success: function(form, action) {
-                           Ext.Msg.alert('Success', action.result.msg);
-                        },
-                        failure: function(form, action) {
-                            Ext.Msg.alert('Failed', action.result.msg);
-                        }
-                    });
-                }
-            }
-        }]
-    });
-
- * @constructor
- * @param {Ext.container.Container} owner The component that is the container for the form, usually a {@link Ext.form.Panel}
- * @param {Object} config Configuration options. These are normally specified in the config to the
- * {@link Ext.form.Panel} constructor, which passes them along to the BasicForm automatically.
  *
- * @markdown
+ * Provides input field management, validation, submission, and form loading services for the collection
+ * of {@link Ext.form.field.Field Field} instances within a {@link Ext.container.Container}. It is recommended
+ * that you use a {@link Ext.form.Panel} as the form container, as that has logic to automatically
+ * hook up an instance of {@link Ext.form.Basic} (plus other conveniences related to field configuration.)
+ *
+ * ## Form Actions
+ *
+ * The Basic class delegates the handling of form loads and submits to instances of {@link Ext.form.action.Action}.
+ * See the various Action implementations for specific details of each one's functionality, as well as the
+ * documentation for {@link #doAction} which details the configuration options that can be specified in
+ * each action call.
+ *
+ * The default submit Action is {@link Ext.form.action.Submit}, which uses an Ajax request to submit the
+ * form's values to a configured URL. To enable normal browser submission of an Ext form, use the
+ * {@link #standardSubmit} config option.
+ *
+ * ## File uploads
+ *
+ * File uploads are not performed using normal 'Ajax' techniques; see the description for
+ * {@link #hasUpload} for details. If you're using file uploads you should read the method description.
+ *
+ * ## Example usage:
+ *
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Basic Form',
+ *         renderTo: Ext.getBody(),
+ *         bodyPadding: 5,
+ *         width: 350,
+ *
+ *         // Any configuration items here will be automatically passed along to
+ *         // the Ext.form.Basic instance when it gets created.
+ *
+ *         // The form will submit an AJAX request to this URL when submitted
+ *         url: 'save-form.php',
+ *
+ *         items: [{
+ *             fieldLabel: 'Field',
+ *             name: 'theField'
+ *         }],
+ *
+ *         buttons: [{
+ *             text: 'Submit',
+ *             handler: function() {
+ *                 // The getForm() method returns the Ext.form.Basic instance:
+ *                 var form = this.up('form').getForm();
+ *                 if (form.isValid()) {
+ *                     // Submit the Ajax request and handle the response
+ *                     form.submit({
+ *                         success: function(form, action) {
+ *                            Ext.Msg.alert('Success', action.result.msg);
+ *                         },
+ *                         failure: function(form, action) {
+ *                             Ext.Msg.alert('Failed', action.result.msg);
+ *                         }
+ *                     });
+ *                 }
+ *             }
+ *         }]
+ *     });
+ *
  * @docauthor Jason Johnston <jason@sencha.com>
  */
-
-
-
 Ext.define('Ext.form.Basic', {
     extend: 'Ext.util.Observable',
     alternateClassName: 'Ext.form.BasicForm',
     requires: ['Ext.util.MixedCollection', 'Ext.form.action.Load', 'Ext.form.action.Submit',
-               'Ext.window.MessageBox', 'Ext.data.Errors'],
+               'Ext.window.MessageBox', 'Ext.data.Errors', 'Ext.util.DelayedTask'],
 
+    /**
+     * Creates new form.
+     * @param {Ext.container.Container} owner The component that is the container for the form, usually a {@link Ext.form.Panel}
+     * @param {Object} config Configuration options. These are normally specified in the config to the
+     * {@link Ext.form.Panel} constructor, which passes them along to the BasicForm automatically.
+     */
     constructor: function(owner, config) {
         var me = this,
             onItemAddOrRemove = me.onItemAddOrRemove;
 
-        /**
+        /**
          * @property owner
          * @type Ext.container.Container
          * The container component to which this BasicForm is attached.
@@ -102,36 +118,38 @@ Ext.define('Ext.form.Basic', {
             me.paramOrder = me.paramOrder.split(/[\s,|]/);
         }
 
+        me.checkValidityTask = Ext.create('Ext.util.DelayedTask', me.checkValidity, me);
+
         me.addEvents(
-            /**
+            /**
              * @event beforeaction
              * Fires before any action is performed. Return false to cancel the action.
              * @param {Ext.form.Basic} this
              * @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} to be performed
              */
             'beforeaction',
-            /**
+            /**
              * @event actionfailed
              * Fires when an action fails.
              * @param {Ext.form.Basic} this
              * @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} that failed
              */
             'actionfailed',
-            /**
+            /**
              * @event actioncomplete
              * Fires when an action is completed.
              * @param {Ext.form.Basic} this
              * @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} that completed
              */
             'actioncomplete',
-            /**
+            /**
              * @event validitychange
              * Fires when the validity of the entire form changes.
              * @param {Ext.form.Basic} this
              * @param {Boolean} valid <tt>true</tt> if the form is now valid, <tt>false</tt> if it is now invalid.
              */
             'validitychange',
-            /**
+            /**
              * @event dirtychange
              * Fires when the dirty state of the entire form changes.
              * @param {Ext.form.Basic} this
@@ -142,7 +160,7 @@ Ext.define('Ext.form.Basic', {
         me.callParent();
     },
 
-    /**
+    /**
      * Do any post constructor initialization
      * @private
      */
@@ -151,17 +169,19 @@ Ext.define('Ext.form.Basic', {
         this.onValidityChange(!this.hasInvalidField());
     },
 
-    /**
+    /**
      * @cfg {String} method
      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
      */
-    /**
+
+    /**
      * @cfg {Ext.data.reader.Reader} reader
      * An Ext.data.DataReader (e.g. {@link Ext.data.reader.Xml}) to be used to read
      * data when executing 'load' actions. This is optional as there is built-in
      * support for processing JSON responses.
      */
-    /**
+
+    /**
      * @cfg {Ext.data.reader.Reader} errorReader
      * <p>An Ext.data.DataReader (e.g. {@link Ext.data.reader.Xml}) to be used to
      * read field error messages returned from 'submit' actions. This is optional
@@ -179,24 +199,24 @@ Ext.define('Ext.form.Basic', {
 </code></pre>
      */
 
-    /**
+    /**
      * @cfg {String} url
      * The URL to use for form actions if one isn't supplied in the
      * {@link #doAction doAction} options.
      */
 
-    /**
+    /**
      * @cfg {Object} baseParams
      * <p>Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.</p>
-     * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode Ext.Object.toQueryString}.</p>
+     * <p>Parameters are encoded as standard HTTP parameters using {@link Ext.Object#toQueryString}.</p>
      */
 
-    /**
+    /**
      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
      */
     timeout: 30,
 
-    /**
+    /**
      * @cfg {Object} api (Optional) If specified, load and submit actions will be handled
      * with {@link Ext.form.action.DirectLoad} and {@link Ext.form.action.DirectLoad}.
      * Methods which have been imported by {@link Ext.direct.Manager} can be specified here to load and submit
@@ -213,8 +233,8 @@ api: {
      * be set on the associated server-side method which has been imported by {@link Ext.direct.Manager}.</p>
      */
 
-    /**
-     * @cfg {Array/String} paramOrder <p>A list of params to be executed server side.
+    /**
+     * @cfg {String/String[]} paramOrder <p>A list of params to be executed server side.
      * Defaults to <tt>undefined</tt>. Only used for the <code>{@link #api}</code>
      * <code>load</code> configuration.</p>
      * <p>Specify the params in the order in which they must be executed on the
@@ -228,39 +248,39 @@ paramOrder: 'param1|param2|param'
      </code></pre>
      */
 
-    /**
-     * @cfg {Boolean} paramsAsHash Only used for the <code>{@link #api}</code>
+    /**
+     * @cfg {Boolean} paramsAsHash
+     * Only used for the <code>{@link #api}</code>
      * <code>load</code> configuration. If <tt>true</tt>, parameters will be sent as a
-     * single hash collection of named arguments (defaults to <tt>false</tt>). Providing a
+     * single hash collection of named arguments. Providing a
      * <tt>{@link #paramOrder}</tt> nullifies this configuration.
      */
     paramsAsHash: false,
 
-    /**
+    /**
      * @cfg {String} waitTitle
-     * The default title to show for the waiting message box (defaults to <tt>'Please Wait...'</tt>)
+     * The default title to show for the waiting message box
      */
     waitTitle: 'Please Wait...',
 
-    /**
-     * @cfg {Boolean} trackResetOnLoad If set to <tt>true</tt>, {@link #reset}() resets to the last loaded
-     * or {@link #setValues}() data instead of when the form was first created.  Defaults to <tt>false</tt>.
+    /**
+     * @cfg {Boolean} trackResetOnLoad
+     * If set to true, {@link #reset}() resets to the last loaded or {@link #setValues}() data instead of
+     * when the form was first created.
      */
     trackResetOnLoad: false,
 
-    /**
+    /**
      * @cfg {Boolean} standardSubmit
-     * <p>If set to <tt>true</tt>, a standard HTML form submit is used instead
-     * of a XHR (Ajax) style form submission. Defaults to <tt>false</tt>. All of
-     * the field values, plus any additional params configured via {@link #baseParams}
-     * and/or the <code>options</code> to {@link #submit}, will be included in the
-     * values submitted in the form.</p>
+     * If set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form submission.
+     * All of the field values, plus any additional params configured via {@link #baseParams}
+     * and/or the `options` to {@link #submit}, will be included in the values submitted in the form.
      */
 
-    /**
-     * @cfg {Mixed} waitMsgTarget
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} waitMsgTarget
      * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
-     * element by passing it or its id or mask the form itself by passing in true. Defaults to <tt>undefined</tt>.
+     * element by passing it or its id or mask the form itself by passing in true.
      */
 
 
@@ -268,14 +288,15 @@ paramOrder: 'param1|param2|param'
     wasDirty: false,
 
 
-    /**
+    /**
      * Destroys this object.
      */
     destroy: function() {
         this.clearListeners();
+        this.checkValidityTask.cancel();
     },
 
-    /**
+    /**
      * @private
      * Handle addition or removal of descendant items. Invalidates the cached list of fields
      * so that {@link #getFields} will do a fresh query next time it is called. Also adds listeners
@@ -300,22 +321,28 @@ paramOrder: 'param1|param2|param'
 
         if (child.isFormField) {
             handleField(child);
-        }
-        else if (isContainer) {
+        } else if (isContainer) {
             // Walk down
-            Ext.Array.forEach(child.query('[isFormField]'), handleField);
+            if (child.isDestroyed) {
+                // the container is destroyed, this means we may have child fields, so here
+                // we just invalidate all the fields to be sure.
+                delete me._fields;
+            } else {
+                Ext.Array.forEach(child.query('[isFormField]'), handleField);
+            }
         }
 
         // Flush the cached list of formBind components
         delete this._boundItems;
 
-        // Check form bind, but only after initial add
+        // Check form bind, but only after initial add. Batch it to prevent excessive validation
+        // calls when many fields are being added at once.
         if (me.initialized) {
-            me.onValidityChange(!me.hasInvalidField());
+            me.checkValidityTask.delay(10);
         }
     },
 
-    /**
+    /**
      * Return all the {@link Ext.form.field.Field} components in the owner container.
      * @return {Ext.util.MixedCollection} Collection of the Field objects
      */
@@ -328,16 +355,23 @@ paramOrder: 'param1|param2|param'
         return fields;
     },
 
+    /**
+     * @private
+     * Finds and returns the set of all items bound to fields inside this form
+     * @return {Ext.util.MixedCollection} The set of all bound form field items
+     */
     getBoundItems: function() {
         var boundItems = this._boundItems;
-        if (!boundItems) {
+        
+        if (!boundItems || boundItems.getCount() === 0) {
             boundItems = this._boundItems = Ext.create('Ext.util.MixedCollection');
             boundItems.addAll(this.owner.query('[formBind]'));
         }
+        
         return boundItems;
     },
 
-    /**
+    /**
      * Returns true if the form contains any invalid fields. No fields will be marked as invalid
      * as a result of calling this; to trigger marking of fields use {@link #isValid} instead.
      */
@@ -352,7 +386,7 @@ paramOrder: 'param1|param2|param'
         });
     },
 
-    /**
+    /**
      * Returns true if client-side validation on the form is successful. Any invalid fields will be
      * marked as invalid. If you only want to determine overall form validity without marking anything,
      * use {@link #hasInvalidField} instead.
@@ -369,7 +403,7 @@ paramOrder: 'param1|param2|param'
         return invalid.length < 1;
     },
 
-    /**
+    /**
      * Check whether the validity of the entire form has changed since it was last checked, and
      * if so fire the {@link #validitychange validitychange} event. This is automatically invoked
      * when an individual field's validity changes.
@@ -384,7 +418,7 @@ paramOrder: 'param1|param2|param'
         }
     },
 
-    /**
+    /**
      * @private
      * Handle changes in the form's validity. If there are any sub components with
      * formBind=true then they are enabled/disabled based on the new validity.
@@ -401,7 +435,7 @@ paramOrder: 'param1|param2|param'
         }
     },
 
-    /**
+    /**
      * <p>Returns true if any fields in this form have changed from their original values.</p>
      * <p>Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the
      * Fields' <em>original values</em> are updated when the values are loaded by {@link #setValues}
@@ -414,7 +448,7 @@ paramOrder: 'param1|param2|param'
         });
     },
 
-    /**
+    /**
      * Check whether the dirty state of the entire form has changed since it was last checked, and
      * if so fire the {@link #dirtychange dirtychange} event. This is automatically invoked
      * when an individual field's dirty state changes.
@@ -427,7 +461,7 @@ paramOrder: 'param1|param2|param'
         }
     },
 
-    /**
+    /**
      * <p>Returns true if the form contains a file upload field. This is used to determine the
      * method for submitting the form: File uploads are not performed using normal 'Ajax' techniques,
      * that is they are <b>not</b> performed using XMLHttpRequests. Instead a hidden <tt>&lt;form></tt>
@@ -455,7 +489,7 @@ paramOrder: 'param1|param2|param'
         });
     },
 
-    /**
+    /**
      * Performs a predefined action (an implementation of {@link Ext.form.action.Action})
      * to perform application-specific processing.
      * @param {String/Ext.form.action.Action} action The name of the predefined action type,
@@ -524,9 +558,9 @@ paramOrder: 'param1|param2|param'
         return this;
     },
 
-    /**
+    /**
      * Shortcut to {@link #doAction do} a {@link Ext.form.action.Submit submit action}. This will use the
-     * {@link Ext.form.action.Submit AJAX submit action} by default. If the {@link #standardsubmit} config is
+     * {@link Ext.form.action.Submit AJAX submit action} by default. If the {@link #standardSubmit} config is
      * enabled it will use a standard form element to submit, or if the {@link #api} config is present it will
      * use the {@link Ext.form.action.DirectLoad Ext.direct.Direct submit action}.
      * @param {Object} options The options to pass to the action (see {@link #doAction} for details).<br>
@@ -572,7 +606,7 @@ myFormPanel.getForm().submit({
         return this.doAction(this.standardSubmit ? 'standardsubmit' : this.api ? 'directsubmit' : 'submit', options);
     },
 
-    /**
+    /**
      * Shortcut to {@link #doAction do} a {@link Ext.form.action.Load load action}.
      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
      * @return {Ext.form.Basic} this
@@ -581,9 +615,9 @@ myFormPanel.getForm().submit({
         return this.doAction(this.api ? 'directload' : 'load', options);
     },
 
-    /**
+    /**
      * Persists the values in this form into the passed {@link Ext.data.Model} object in a beginEdit/endEdit block.
-     * @param {Ext.data.Record} record The record to edit
+     * @param {Ext.data.Model} record The record to edit
      * @return {Ext.form.Basic} this
      */
     updateRecord: function(record) {
@@ -606,9 +640,9 @@ myFormPanel.getForm().submit({
         return this;
     },
 
-    /**
+    /**
      * Loads an {@link Ext.data.Model} into this form by calling {@link #setValues} with the
-     * {@link Ext.data.Model#data record data}.
+     * {@link Ext.data.Model#raw record data}.
      * See also {@link #trackResetOnLoad}.
      * @param {Ext.data.Model} record The record to load
      * @return {Ext.form.Basic} this
@@ -617,8 +651,8 @@ myFormPanel.getForm().submit({
         this._record = record;
         return this.setValues(record.data);
     },
-    
-    /**
+
+    /**
      * Returns the last Ext.data.Model instance that was loaded via {@link #loadRecord}
      * @return {Ext.data.Model} The record
      */
@@ -626,7 +660,7 @@ myFormPanel.getForm().submit({
         return this._record;
     },
 
-    /**
+    /**
      * @private
      * Called before an action is performed via {@link #doAction}.
      * @param {Ext.form.action.Action} action The Action instance that was invoked
@@ -656,7 +690,7 @@ myFormPanel.getForm().submit({
         }
     },
 
-    /**
+    /**
      * @private
      * Called after an action is performed via {@link #doAction}.
      * @param {Ext.form.action.Action} action The Action instance that was invoked
@@ -688,7 +722,7 @@ myFormPanel.getForm().submit({
     },
 
 
-    /**
+    /**
      * Find a specific {@link Ext.form.field.Field} in this form by id or name.
      * @param {String} id The value to search for (specify either a {@link Ext.Component#id id} or
      * {@link Ext.form.field.Field#getName name or hiddenName}).
@@ -701,9 +735,10 @@ myFormPanel.getForm().submit({
     },
 
 
-    /**
+    /**
      * Mark fields in this form invalid in bulk.
-     * @param {Array/Object} errors Either an array in the form <code>[{id:'fieldId', msg:'The message'}, ...]</code>,
+     * @param {Object/Object[]/Ext.data.Errors} errors
+     * Either an array in the form <code>[{id:'fieldId', msg:'The message'}, ...]</code>,
      * an object hash of <code>{id: msg, id2: msg2}</code>, or a {@link Ext.data.Errors} object.
      * @return {Ext.form.Basic} this
      */
@@ -733,9 +768,9 @@ myFormPanel.getForm().submit({
         return this;
     },
 
-    /**
+    /**
      * Set values for fields in this form in bulk.
-     * @param {Array/Object} values Either an array in the form:<pre><code>
+     * @param {Object/Object[]} values Either an array in the form:<pre><code>
 [{id:'clientName', value:'Fred. Olsen Lines'},
  {id:'portOfLoading', value:'FXT'},
  {id:'portOfDischarge', value:'OSL'} ]</code></pre>
@@ -772,7 +807,7 @@ myFormPanel.getForm().submit({
         return this;
     },
 
-    /**
+    /**
      * Retrieves the fields in the form as a set of key/value pairs, using their
      * {@link Ext.form.field.Field#getSubmitData getSubmitData()} method to collect the values.
      * If multiple fields return values under the same name those values will be combined into an Array.
@@ -822,7 +857,7 @@ myFormPanel.getForm().submit({
         return values;
     },
 
-    /**
+    /**
      * Retrieves the fields in the form as a set of key/value pairs, using their
      * {@link Ext.form.field.Field#getModelData getModelData()} method to collect the values.
      * If multiple fields return values under the same name those values will be combined into an Array.
@@ -836,7 +871,7 @@ myFormPanel.getForm().submit({
         return this.getValues(false, dirtyOnly, false, true);
     },
 
-    /**
+    /**
      * Clears all invalid field messages in this form.
      * @return {Ext.form.Basic} this
      */
@@ -850,7 +885,7 @@ myFormPanel.getForm().submit({
         return me;
     },
 
-    /**
+    /**
      * Resets all fields in this form.
      * @return {Ext.form.Basic} this
      */
@@ -864,7 +899,7 @@ myFormPanel.getForm().submit({
         return me;
     },
 
-    /**
+    /**
      * Calls {@link Ext#apply Ext.apply} for all fields in this form with the passed object.
      * @param {Object} obj The object to be applied
      * @return {Ext.form.Basic} this
@@ -876,7 +911,7 @@ myFormPanel.getForm().submit({
         return this;
     },
 
-    /**
+    /**
      * Calls {@link Ext#applyIf Ext.applyIf} for all field in this form with the passed object.
      * @param {Object} obj The object to be applied
      * @return {Ext.form.Basic} this
@@ -888,7 +923,7 @@ myFormPanel.getForm().submit({
         return this;
     },
 
-    /**
+    /**
      * @private
      * Utility wrapper that suspends layouts of all field parent containers for the duration of a given
      * function. Used during full-form validation and resets to prevent huge numbers of layouts.
@@ -921,4 +956,6 @@ myFormPanel.getForm().submit({
         me.owner.doComponentLayout();
     }
 });
-
\ No newline at end of file +
+ +