docs/source/BasicForm.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.form.BasicForm"></div>/**
   9  * @class Ext.form.BasicForm
  10  * @extends Ext.util.Observable
  11  * <p>Encapsulates the DOM &lt;form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides
  12  * input field management, validation, submission, and form loading services.</p>
  13  * <p>By default, Ext Forms are submitted through Ajax, using an instance of {@link Ext.form.Action.Submit}.
  14  * To enable normal browser submission of an Ext Form, use the {@link #standardSubmit} config option.</p>
  15  * <p><b><u>File Uploads</u></b></p>
  16  * <p>{@link #fileUpload File uploads} are not performed using Ajax submission, that
  17  * is they are <b>not</b> performed using XMLHttpRequests. Instead the form is submitted in the standard
  18  * manner with the DOM <tt>&lt;form></tt> element temporarily modified to have its
  19  * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
  20  * to a dynamically generated, hidden <tt>&lt;iframe></tt> which is inserted into the document
  21  * but removed after the return data has been gathered.</p>
  22  * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
  23  * server is using JSON to send the return object, then the
  24  * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
  25  * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
  26  * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
  27  * "&lt;" as "&amp;lt;", "&amp;" as "&amp;amp;" etc.</p>
  28  * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
  29  * is created containing a <tt>responseText</tt> property in order to conform to the
  30  * requirements of event handlers and callbacks.</p>
  31  * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
  32  * and some server technologies (notably JEE) may require some custom processing in order to
  33  * retrieve parameter names and parameter values from the packet content.</p>
  34  * @constructor
  35  * @param {Mixed} el The form element or its id
  36  * @param {Object} config Configuration options
  37  */
  38 Ext.form.BasicForm = function(el, config){
  39     Ext.apply(this, config);
  40     if(Ext.isString(this.paramOrder)){
  41         this.paramOrder = this.paramOrder.split(/[\s,|]/);
  42     }
  43     /*
  44      * @property items
  45      * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form.
  46      * @type MixedCollection
  47      */
  48     this.items = new Ext.util.MixedCollection(false, function(o){
  49         return o.itemId || o.id || (o.id = Ext.id());
  50     });
  51     this.addEvents(
  52         <div id="event-Ext.form.BasicForm-beforeaction"></div>/**
  53          * @event beforeaction
  54          * Fires before any action is performed. Return false to cancel the action.
  55          * @param {Form} this
  56          * @param {Action} action The {@link Ext.form.Action} to be performed
  57          */
  58         'beforeaction',
  59         <div id="event-Ext.form.BasicForm-actionfailed"></div>/**
  60          * @event actionfailed
  61          * Fires when an action fails.
  62          * @param {Form} this
  63          * @param {Action} action The {@link Ext.form.Action} that failed
  64          */
  65         'actionfailed',
  66         <div id="event-Ext.form.BasicForm-actioncomplete"></div>/**
  67          * @event actioncomplete
  68          * Fires when an action is completed.
  69          * @param {Form} this
  70          * @param {Action} action The {@link Ext.form.Action} that completed
  71          */
  72         'actioncomplete'
  73     );
  74
  75     if(el){
  76         this.initEl(el);
  77     }
  78     Ext.form.BasicForm.superclass.constructor.call(this);
  79 };
  80
  81 Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {
  82     <div id="cfg-Ext.form.BasicForm-method"></div>/**
  83      * @cfg {String} method
  84      * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
  85      */
  86     <div id="cfg-Ext.form.BasicForm-reader"></div>/**
  87      * @cfg {DataReader} reader
  88      * An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read
  89      * data when executing 'load' actions. This is optional as there is built-in
  90      * support for processing JSON.  For additional information on using an XMLReader
  91      * see the example provided in examples/form/xml-form.html.
  92      */
  93     <div id="cfg-Ext.form.BasicForm-errorReader"></div>/**
  94      * @cfg {DataReader} errorReader
  95      * <p>An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to
  96      * read field error messages returned from 'submit' actions. This is optional
  97      * as there is built-in support for processing JSON.</p>
  98      * <p>The Records which provide messages for the invalid Fields must use the
  99      * Field name (or id) as the Record ID, and must contain a field called 'msg'
 100      * which contains the error message.</p>
 101      * <p>The errorReader does not have to be a full-blown implementation of a
 102      * DataReader. It simply needs to implement a <tt>read(xhr)</tt> function
 103      * which returns an Array of Records in an object with the following
 104      * structure:</p><pre><code>
 105 {
 106     records: recordArray
 107 }
 108 </code></pre>
 109      */
 110     <div id="cfg-Ext.form.BasicForm-url"></div>/**
 111      * @cfg {String} url
 112      * The URL to use for form actions if one isn't supplied in the
 113      * <code>{@link #doAction doAction} options</code>.
 114      */
 115     <div id="cfg-Ext.form.BasicForm-fileUpload"></div>/**
 116      * @cfg {Boolean} fileUpload
 117      * Set to true if this form is a file upload.
 118      * <p>File uploads are not performed using normal 'Ajax' techniques, that is they are <b>not</b>
 119      * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
 120      * DOM <tt>&lt;form></tt> element temporarily modified to have its
 121      * <a href="http://www.w3.org/TR/REC-html40/present/frames.html#adef-target">target</a> set to refer
 122      * to a dynamically generated, hidden <tt>&lt;iframe></tt> which is inserted into the document
 123      * but removed after the return data has been gathered.</p>
 124      * <p>The server response is parsed by the browser to create the document for the IFRAME. If the
 125      * server is using JSON to send the return object, then the
 126      * <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17">Content-Type</a> header
 127      * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.</p>
 128      * <p>Characters which are significant to an HTML parser must be sent as HTML entities, so encode
 129      * "&lt;" as "&amp;lt;", "&amp;" as "&amp;amp;" etc.</p>
 130      * <p>The response text is retrieved from the document, and a fake XMLHttpRequest object
 131      * is created containing a <tt>responseText</tt> property in order to conform to the
 132      * requirements of event handlers and callbacks.</p>
 133      * <p>Be aware that file upload packets are sent with the content type <a href="http://www.faqs.org/rfcs/rfc2388.html">multipart/form</a>
 134      * and some server technologies (notably JEE) may require some custom processing in order to
 135      * retrieve parameter names and parameter values from the packet content.</p>
 136      */
 137     <div id="cfg-Ext.form.BasicForm-baseParams"></div>/**
 138      * @cfg {Object} baseParams
 139      * <p>Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.</p>
 140      * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>
 141      */
 142     <div id="cfg-Ext.form.BasicForm-timeout"></div>/**
 143      * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
 144      */
 145     timeout: 30,
 146
 147     <div id="cfg-Ext.form.BasicForm-api"></div>/**
 148      * @cfg {Object} api (Optional) If specified load and submit actions will be handled
 149      * with {@link Ext.form.Action.DirectLoad} and {@link Ext.form.Action.DirectSubmit}.
 150      * Methods which have been imported by Ext.Direct can be specified here to load and submit
 151      * forms.
 152      * Such as the following:<pre><code>
 153 api: {
 154     load: App.ss.MyProfile.load,
 155     submit: App.ss.MyProfile.submit
 156 }
 157 </code></pre>
 158      * <p>Load actions can use <code>{@link #paramOrder}</code> or <code>{@link #paramsAsHash}</code>
 159      * to customize how the load method is invoked.
 160      * Submit actions will always use a standard form submit. The formHandler configuration must
 161      * be set on the associated server-side method which has been imported by Ext.Direct</p>
 162      */
 163
 164     <div id="cfg-Ext.form.BasicForm-paramOrder"></div>/**
 165      * @cfg {Array/String} paramOrder <p>A list of params to be executed server side.
 166      * Defaults to <tt>undefined</tt>. Only used for the <code>{@link #api}</code>
 167      * <code>load</code> configuration.</p>
 168      * <br><p>Specify the params in the order in which they must be executed on the
 169      * server-side as either (1) an Array of String values, or (2) a String of params
 170      * delimited by either whitespace, comma, or pipe. For example,
 171      * any of the following would be acceptable:</p><pre><code>
 172 paramOrder: ['param1','param2','param3']
 173 paramOrder: 'param1 param2 param3'
 174 paramOrder: 'param1,param2,param3'
 175 paramOrder: 'param1|param2|param'
 176      </code></pre>
 177      */
 178     paramOrder: undefined,
 179
 180     <div id="cfg-Ext.form.BasicForm-paramsAsHash"></div>/**
 181      * @cfg {Boolean} paramsAsHash Only used for the <code>{@link #api}</code>
 182      * <code>load</code> configuration. Send parameters as a collection of named
 183      * arguments (defaults to <tt>false</tt>). Providing a
 184      * <tt>{@link #paramOrder}</tt> nullifies this configuration.
 185      */
 186     paramsAsHash: false,
 187
 188
 189     // private
 190     activeAction : null,
 191
 192     <div id="cfg-Ext.form.BasicForm-trackResetOnLoad"></div>/**
 193      * @cfg {Boolean} trackResetOnLoad If set to <tt>true</tt>, {@link #reset}() resets to the last loaded
 194      * or {@link #setValues}() data instead of when the form was first created.  Defaults to <tt>false</tt>.
 195      */
 196     trackResetOnLoad : false,
 197
 198     <div id="cfg-Ext.form.BasicForm-standardSubmit"></div>/**
 199      * @cfg {Boolean} standardSubmit If set to true, standard HTML form submits are used instead of XHR (Ajax) style
 200      * form submissions. (defaults to false)<br>
 201      * <p><b>Note:</b> When using standardSubmit, the options to {@link #submit} are ignored because Ext's
 202      * Ajax infrastracture is bypassed. To pass extra parameters (baseParams and params), you will need to
 203      * create hidden fields within the form.</p>
 204      * <p>The url config option is also bypassed, so set the action as well:</p>
 205      * <pre><code>
 206 PANEL.getForm().getEl().dom.action = 'URL'
 207      * </code></pre>
 208      * An example encapsulating the above:
 209      * <pre><code>
 210 new Ext.FormPanel({
 211     standardSubmit: true,
 212     baseParams: {
 213         foo: 'bar'
 214     },
 215     url: 'myProcess.php',
 216     items: [{
 217         xtype: 'textfield',
 218         name: 'userName'
 219     }],
 220     buttons: [{
 221         text: 'Save',
 222         handler: function(){
 223             var O = this.ownerCt;
 224             if (O.getForm().isValid()) {
 225                 if (O.url)
 226                     O.getForm().getEl().dom.action = O.url;
 227                 if (O.baseParams) {
 228                     for (i in O.baseParams) {
 229                         O.add({
 230                             xtype: 'hidden',
 231                             name: i,
 232                             value: O.baseParams[i]
 233                         })
 234                     }
 235                     O.doLayout();
 236                 }
 237                 O.getForm().submit();
 238             }
 239         }
 240     }]
 241 });
 242      * </code></pre>
 243      */
 244     <div id="prop-Ext.form.BasicForm-waitMsgTarget"></div>/**
 245      * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
 246      * element by passing it or its id or mask the form itself by passing in true.
 247      * @type Mixed
 248      * @property waitMsgTarget
 249      */
 250
 251     // private
 252     initEl : function(el){
 253         this.el = Ext.get(el);
 254         this.id = this.el.id || Ext.id();
 255         if(!this.standardSubmit){
 256             this.el.on('submit', this.onSubmit, this);
 257         }
 258         this.el.addClass('x-form');
 259     },
 260
 261     <div id="method-Ext.form.BasicForm-getEl"></div>/**
 262      * Get the HTML form Element
 263      * @return Ext.Element
 264      */
 265     getEl: function(){
 266         return this.el;
 267     },
 268
 269     // private
 270     onSubmit : function(e){
 271         e.stopEvent();
 272     },
 273
 274     // private
 275     destroy: function() {
 276         this.items.each(function(f){
 277             Ext.destroy(f);
 278         });
 279         if(this.el){
 280             this.el.removeAllListeners();
 281             this.el.remove();
 282         }
 283         this.purgeListeners();
 284     },
 285
 286     <div id="method-Ext.form.BasicForm-isValid"></div>/**
 287      * Returns true if client-side validation on the form is successful.
 288      * @return Boolean
 289      */
 290     isValid : function(){
 291         var valid = true;
 292         this.items.each(function(f){
 293            if(!f.validate()){
 294                valid = false;
 295            }
 296         });
 297         return valid;
 298     },
 299
 300     <div id="method-Ext.form.BasicForm-isDirty"></div>/**
 301      * <p>Returns true if any fields in this form have changed from their original values.</p>
 302      * <p>Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the
 303      * Fields' <i>original values</i> are updated when the values are loaded by {@link #setValues}
 304      * or {@link #loadRecord}.</p>
 305      * @return Boolean
 306      */
 307     isDirty : function(){
 308         var dirty = false;
 309         this.items.each(function(f){
 310            if(f.isDirty()){
 311                dirty = true;
 312                return false;
 313            }
 314         });
 315         return dirty;
 316     },
 317
 318     <div id="method-Ext.form.BasicForm-doAction"></div>/**
 319      * Performs a predefined action ({@link Ext.form.Action.Submit} or
 320      * {@link Ext.form.Action.Load}) or a custom extension of {@link Ext.form.Action}
 321      * to perform application-specific processing.
 322      * @param {String/Object} actionName The name of the predefined action type,
 323      * or instance of {@link Ext.form.Action} to perform.
 324      * @param {Object} options (optional) The options to pass to the {@link Ext.form.Action}.
 325      * All of the config options listed below are supported by both the
 326      * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
 327      * actions unless otherwise noted (custom actions could also accept
 328      * other config options):<ul>
 329      *
 330      * <li><b>url</b> : String<div class="sub-desc">The url for the action (defaults
 331      * to the form's {@link #url}.)</div></li>
 332      *
 333      * <li><b>method</b> : String<div class="sub-desc">The form method to use (defaults
 334      * to the form's method, or POST if not defined)</div></li>
 335      *
 336      * <li><b>params</b> : String/Object<div class="sub-desc"><p>The params to pass
 337      * (defaults to the form's baseParams, or none if not defined)</p>
 338      * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p></div></li>
 339      *
 340      * <li><b>headers</b> : Object<div class="sub-desc">Request headers to set for the action
 341      * (defaults to the form's default headers)</div></li>
 342      *
 343      * <li><b>success</b> : Function<div class="sub-desc">The callback that will
 344      * be invoked after a successful response (see top of
 345      * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load}
 346      * for a description of what constitutes a successful response).
 347      * The function is passed the following parameters:<ul>
 348      * <li><tt>form</tt> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>
 349      * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
 350      * <div class="sub-desc">The action object contains these properties of interest:<ul>
 351      * <li><tt>{@link Ext.form.Action#response response}</tt></li>
 352      * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
 353      * <li><tt>{@link Ext.form.Action#type type}</tt></li>
 354      * </ul></div></li></ul></div></li>
 355      *
 356      * <li><b>failure</b> : Function<div class="sub-desc">The callback that will be invoked after a
 357      * failed transaction attempt. The function is passed the following parameters:<ul>
 358      * <li><tt>form</tt> : The {@link Ext.form.BasicForm} that requested the action.</li>
 359      * <li><tt>action</tt> : The {@link Ext.form.Action Action} object which performed the operation.
 360      * <div class="sub-desc">The action object contains these properties of interest:<ul>
 361      * <li><tt>{@link Ext.form.Action#failureType failureType}</tt></li>
 362      * <li><tt>{@link Ext.form.Action#response response}</tt></li>
 363      * <li><tt>{@link Ext.form.Action#result result}</tt> : interrogate for custom postprocessing</li>
 364      * <li><tt>{@link Ext.form.Action#type type}</tt></li>
 365      * </ul></div></li></ul></div></li>
 366      *
 367      * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the
 368      * callback functions (The <tt>this</tt> reference for the callback functions).</div></li>
 369      *
 370      * <li><b>clientValidation</b> : Boolean<div class="sub-desc">Submit Action only.
 371      * Determines whether a Form's fields are validated in a final call to
 372      * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to <tt>false</tt>
 373      * to prevent this. If undefined, pre-submission field validation is performed.</div></li></ul>
 374      *
 375      * @return {BasicForm} this
 376      */
 377     doAction : function(action, options){
 378         if(Ext.isString(action)){
 379             action = new Ext.form.Action.ACTION_TYPES[action](this, options);
 380         }
 381         if(this.fireEvent('beforeaction', this, action) !== false){
 382             this.beforeAction(action);
 383             action.run.defer(100, action);
 384         }
 385         return this;
 386     },
 387
 388     <div id="method-Ext.form.BasicForm-submit"></div>/**
 389      * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Submit submit action}.
 390      * @param {Object} options The options to pass to the action (see {@link #doAction} for details).<br>
 391      * <p><b>Note:</b> this is ignored when using the {@link #standardSubmit} option.</p>
 392      * <p>The following code:</p><pre><code>
 393 myFormPanel.getForm().submit({
 394     clientValidation: true,
 395     url: 'updateConsignment.php',
 396     params: {
 397         newStatus: 'delivered'
 398     },
 399     success: function(form, action) {
 400        Ext.Msg.alert('Success', action.result.msg);
 401     },
 402     failure: function(form, action) {
 403         switch (action.failureType) {
 404             case Ext.form.Action.CLIENT_INVALID:
 405                 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
 406                 break;
 407             case Ext.form.Action.CONNECT_FAILURE:
 408                 Ext.Msg.alert('Failure', 'Ajax communication failed');
 409                 break;
 410             case Ext.form.Action.SERVER_INVALID:
 411                Ext.Msg.alert('Failure', action.result.msg);
 412        }
 413     }
 414 });
 415 </code></pre>
 416      * would process the following server response for a successful submission:<pre><code>
 417 {
 418     "success":true, // note this is Boolean, not string
 419     "msg":"Consignment updated"
 420 }
 421 </code></pre>
 422      * and the following server response for a failed submission:<pre><code>
 423 {
 424     "success":false, // note this is Boolean, not string
 425     "msg":"You do not have permission to perform this operation"
 426 }
 427 </code></pre>
 428      * @return {BasicForm} this
 429      */
 430     submit : function(options){
 431         if(this.standardSubmit){
 432             var v = this.isValid();
 433             if(v){
 434                 this.el.dom.submit();
 435             }
 436             return v;
 437         }
 438         var submitAction = String.format('{0}submit', this.api ? 'direct' : '');
 439         this.doAction(submitAction, options);
 440         return this;
 441     },
 442
 443     <div id="method-Ext.form.BasicForm-load"></div>/**
 444      * Shortcut to {@link #doAction do} a {@link Ext.form.Action.Load load action}.
 445      * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
 446      * @return {BasicForm} this
 447      */
 448     load : function(options){
 449         var loadAction = String.format('{0}load', this.api ? 'direct' : '');
 450         this.doAction(loadAction, options);
 451         return this;
 452     },
 453
 454     <div id="method-Ext.form.BasicForm-updateRecord"></div>/**
 455      * Persists the values in this form into the passed {@link Ext.data.Record} object in a beginEdit/endEdit block.
 456      * @param {Record} record The record to edit
 457      * @return {BasicForm} this
 458      */
 459     updateRecord : function(record){
 460         record.beginEdit();
 461         var fs = record.fields;
 462         fs.each(function(f){
 463             var field = this.findField(f.name);
 464             if(field){
 465                 record.set(f.name, field.getValue());
 466             }
 467         }, this);
 468         record.endEdit();
 469         return this;
 470     },
 471
 472     <div id="method-Ext.form.BasicForm-loadRecord"></div>/**
 473      * Loads an {@link Ext.data.Record} into this form by calling {@link #setValues} with the
 474      * {@link Ext.data.Record#data record data}.
 475      * See also {@link #trackResetOnLoad}.
 476      * @param {Record} record The record to load
 477      * @return {BasicForm} this
 478      */
 479     loadRecord : function(record){
 480         this.setValues(record.data);
 481         return this;
 482     },
 483
 484     // private
 485     beforeAction : function(action){
 486         var o = action.options;
 487         if(o.waitMsg){
 488             if(this.waitMsgTarget === true){
 489                 this.el.mask(o.waitMsg, 'x-mask-loading');
 490             }else if(this.waitMsgTarget){
 491                 this.waitMsgTarget = Ext.get(this.waitMsgTarget);
 492                 this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading');
 493             }else{
 494                 Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle || 'Please Wait...');
 495             }
 496         }
 497     },
 498
 499     // private
 500     afterAction : function(action, success){
 501         this.activeAction = null;
 502         var o = action.options;
 503         if(o.waitMsg){
 504             if(this.waitMsgTarget === true){
 505                 this.el.unmask();
 506             }else if(this.waitMsgTarget){
 507                 this.waitMsgTarget.unmask();
 508             }else{
 509                 Ext.MessageBox.updateProgress(1);
 510                 Ext.MessageBox.hide();
 511             }
 512         }
 513         if(success){
 514             if(o.reset){
 515                 this.reset();
 516             }
 517             Ext.callback(o.success, o.scope, [this, action]);
 518             this.fireEvent('actioncomplete', this, action);
 519         }else{
 520             Ext.callback(o.failure, o.scope, [this, action]);
 521             this.fireEvent('actionfailed', this, action);
 522         }
 523     },
 524
 525     <div id="method-Ext.form.BasicForm-findField"></div>/**
 526      * Find a {@link Ext.form.Field} in this form.
 527      * @param {String} id The value to search for (specify either a {@link Ext.Component#id id},
 528      * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}).
 529      * @return Field
 530      */
 531     findField : function(id){
 532         var field = this.items.get(id);
 533         if(!Ext.isObject(field)){
 534             this.items.each(function(f){
 535                 if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
 536                     field = f;
 537                     return false;
 538                 }
 539             });
 540         }
 541         return field || null;
 542     },
 543
 544
 545     <div id="method-Ext.form.BasicForm-markInvalid"></div>/**
 546      * Mark fields in this form invalid in bulk.
 547      * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
 548      * @return {BasicForm} this
 549      */
 550     markInvalid : function(errors){
 551         if(Ext.isArray(errors)){
 552             for(var i = 0, len = errors.length; i < len; i++){
 553                 var fieldError = errors[i];
 554                 var f = this.findField(fieldError.id);
 555                 if(f){
 556                     f.markInvalid(fieldError.msg);
 557                 }
 558             }
 559         }else{
 560             var field, id;
 561             for(id in errors){
 562                 if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){
 563                     field.markInvalid(errors[id]);
 564                 }
 565             }
 566         }
 567         return this;
 568     },
 569
 570     <div id="method-Ext.form.BasicForm-setValues"></div>/**
 571      * Set values for fields in this form in bulk.
 572      * @param {Array/Object} values Either an array in the form:<pre><code>
 573 [{id:'clientName', value:'Fred. Olsen Lines'},
 574  {id:'portOfLoading', value:'FXT'},
 575  {id:'portOfDischarge', value:'OSL'} ]</code></pre>
 576      * or an object hash of the form:<pre><code>
 577 {
 578     clientName: 'Fred. Olsen Lines',
 579     portOfLoading: 'FXT',
 580     portOfDischarge: 'OSL'
 581 }</code></pre>
 582      * @return {BasicForm} this
 583      */
 584     setValues : function(values){
 585         if(Ext.isArray(values)){ // array of objects
 586             for(var i = 0, len = values.length; i < len; i++){
 587                 var v = values[i];
 588                 var f = this.findField(v.id);
 589                 if(f){
 590                     f.setValue(v.value);
 591                     if(this.trackResetOnLoad){
 592                         f.originalValue = f.getValue();
 593                     }
 594                 }
 595             }
 596         }else{ // object hash
 597             var field, id;
 598             for(id in values){
 599                 if(!Ext.isFunction(values[id]) && (field = this.findField(id))){
 600                     field.setValue(values[id]);
 601                     if(this.trackResetOnLoad){
 602                         field.originalValue = field.getValue();
 603                     }
 604                 }
 605             }
 606         }
 607         return this;
 608     },
 609
 610     <div id="method-Ext.form.BasicForm-getValues"></div>/**
 611      * <p>Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit.
 612      * If multiple fields exist with the same name they are returned as an array.</p>
 613      * <p><b>Note:</b> The values are collected from all enabled HTML input elements within the form, <u>not</u> from
 614      * the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the
 615      * value can potentially be the emptyText of a field.</p>
 616      * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object)
 617      * @return {String/Object}
 618      */
 619     getValues : function(asString){
 620         var fs = Ext.lib.Ajax.serializeForm(this.el.dom);
 621         if(asString === true){
 622             return fs;
 623         }
 624         return Ext.urlDecode(fs);
 625     },
 626
 627     getFieldValues : function(){
 628         var o = {};
 629         this.items.each(function(f){
 630            o[f.getName()] = f.getValue();
 631         });
 632         return o;
 633     },
 634
 635     <div id="method-Ext.form.BasicForm-clearInvalid"></div>/**
 636      * Clears all invalid messages in this form.
 637      * @return {BasicForm} this
 638      */
 639     clearInvalid : function(){
 640         this.items.each(function(f){
 641            f.clearInvalid();
 642         });
 643         return this;
 644     },
 645
 646     <div id="method-Ext.form.BasicForm-reset"></div>/**
 647      * Resets this form.
 648      * @return {BasicForm} this
 649      */
 650     reset : function(){
 651         this.items.each(function(f){
 652             f.reset();
 653         });
 654         return this;
 655     },
 656
 657     <div id="method-Ext.form.BasicForm-add"></div>/**
 658      * Add Ext.form Components to this form's Collection. This does not result in rendering of
 659      * the passed Component, it just enables the form to validate Fields, and distribute values to
 660      * Fields.
 661      * <p><b>You will not usually call this function. In order to be rendered, a Field must be added
 662      * to a {@link Ext.Container Container}, usually an {@link Ext.form.FormPanel FormPanel}.
 663      * The FormPanel to which the field is added takes care of adding the Field to the BasicForm's
 664      * collection.</b></p>
 665      * @param {Field} field1
 666      * @param {Field} field2 (optional)
 667      * @param {Field} etc (optional)
 668      * @return {BasicForm} this
 669      */
 670     add : function(){
 671         this.items.addAll(Array.prototype.slice.call(arguments, 0));
 672         return this;
 673     },
 674
 675
 676     <div id="method-Ext.form.BasicForm-remove"></div>/**
 677      * Removes a field from the items collection (does NOT remove its markup).
 678      * @param {Field} field
 679      * @return {BasicForm} this
 680      */
 681     remove : function(field){
 682         this.items.remove(field);
 683         return this;
 684     },
 685
 686     <div id="method-Ext.form.BasicForm-render"></div>/**
 687      * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm,
 688      * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id.
 689      * @return {BasicForm} this
 690      */
 691     render : function(){
 692         this.items.each(function(f){
 693             if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
 694                 f.applyToMarkup(f.id);
 695             }
 696         });
 697         return this;
 698     },
 699
 700     <div id="method-Ext.form.BasicForm-applyToFields"></div>/**
 701      * Calls {@link Ext#apply} for all fields in this form with the passed object.
 702      * @param {Object} values
 703      * @return {BasicForm} this
 704      */
 705     applyToFields : function(o){
 706         this.items.each(function(f){
 707            Ext.apply(f, o);
 708         });
 709         return this;
 710     },
 711
 712     <div id="method-Ext.form.BasicForm-applyIfToFields"></div>/**
 713      * Calls {@link Ext#applyIf} for all field in this form with the passed object.
 714      * @param {Object} values
 715      * @return {BasicForm} this
 716      */
 717     applyIfToFields : function(o){
 718         this.items.each(function(f){
 719            Ext.applyIf(f, o);
 720         });
 721         return this;
 722     },
 723
 724     callFieldMethod : function(fnName, args){
 725         args = args || [];
 726         this.items.each(function(f){
 727             if(Ext.isFunction(f[fnName])){
 728                 f[fnName].apply(f, args);
 729             }
 730         });
 731         return this;
 732     }
 733 });
 734
 735 // back compat
 736 Ext.BasicForm = Ext.form.BasicForm;</pre>    \r
 737 </body>\r
 738 </html>