docs/source/Action1.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">/*!
   9  * Ext JS Library 3.0.3
  10  * Copyright(c) 2006-2009 Ext JS, LLC
  11  * licensing@extjs.com
  12  * http://www.extjs.com/license
  13  */
  14 <div id="cls-Ext.form.Action"></div>/**\r
  15  * @class Ext.form.Action\r
  16  * <p>The subclasses of this class provide actions to perform upon {@link Ext.form.BasicForm Form}s.</p>\r
  17  * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
  18  * the Form needs to perform an action such as submit or load. The Configuration options\r
  19  * listed for this class are set through the Form's action methods: {@link Ext.form.BasicForm#submit submit},\r
  20  * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}</p>\r
  21  * <p>The instance of Action which performed the action is passed to the success\r
  22  * and failure callbacks of the Form's action methods ({@link Ext.form.BasicForm#submit submit},\r
  23  * {@link Ext.form.BasicForm#load load} and {@link Ext.form.BasicForm#doAction doAction}),\r
  24  * and to the {@link Ext.form.BasicForm#actioncomplete actioncomplete} and\r
  25  * {@link Ext.form.BasicForm#actionfailed actionfailed} event handlers.</p>\r
  26  */\r
  27 Ext.form.Action = function(form, options){\r
  28     this.form = form;\r
  29     this.options = options || {};\r
  30 };\r
  31 \r
  32 <div id="prop-Ext.form.Action-CLIENT_INVALID"></div>/**\r
  33  * Failure type returned when client side validation of the Form fails\r
  34  * thus aborting a submit action. Client side validation is performed unless\r
  35  * {@link #clientValidation} is explicitly set to <tt>false</tt>.\r
  36  * @type {String}\r
  37  * @static\r
  38  */\r
  39 Ext.form.Action.CLIENT_INVALID = 'client';\r
  40 <div id="prop-Ext.form.Action-SERVER_INVALID"></div>/**\r
  41  * <p>Failure type returned when server side processing fails and the {@link #result}'s\r
  42  * <tt style="font-weight:bold">success</tt> property is set to <tt>false</tt>.</p>\r
  43  * <p>In the case of a form submission, field-specific error messages may be returned in the\r
  44  * {@link #result}'s <tt style="font-weight:bold">errors</tt> property.</p>\r
  45  * @type {String}\r
  46  * @static\r
  47  */\r
  48 Ext.form.Action.SERVER_INVALID = 'server';\r
  49 <div id="prop-Ext.form.Action-CONNECT_FAILURE"></div>/**\r
  50  * Failure type returned when a communication error happens when attempting\r
  51  * to send a request to the remote server. The {@link #response} may be examined to\r
  52  * provide further information.\r
  53  * @type {String}\r
  54  * @static\r
  55  */\r
  56 Ext.form.Action.CONNECT_FAILURE = 'connect';\r
  57 <div id="prop-Ext.form.Action-LOAD_FAILURE"></div>/**\r
  58  * Failure type returned when the response's <tt style="font-weight:bold">success</tt>\r
  59  * property is set to <tt>false</tt>, or no field values are returned in the response's\r
  60  * <tt style="font-weight:bold">data</tt> property.\r
  61  * @type {String}\r
  62  * @static\r
  63  */\r
  64 Ext.form.Action.LOAD_FAILURE = 'load';\r
  65 \r
  66 Ext.form.Action.prototype = {\r
  67 <div id="cfg-Ext.form.Action-url"></div>/**\r
  68  * @cfg {String} url The URL that the Action is to invoke.\r
  69  */\r
  70 <div id="cfg-Ext.form.Action-reset"></div>/**\r
  71  * @cfg {Boolean} reset When set to <tt><b>true</b></tt>, causes the Form to be\r
  72  * {@link Ext.form.BasicForm.reset reset} on Action success. If specified, this happens\r
  73  * <b>before</b> the {@link #success} callback is called and before the Form's\r
  74  * {@link Ext.form.BasicForm.actioncomplete actioncomplete} event fires.\r
  75  */\r
  76 <div id="cfg-Ext.form.Action-method"></div>/**\r
  77  * @cfg {String} method The HTTP method to use to access the requested URL. Defaults to the\r
  78  * {@link Ext.form.BasicForm}'s method, or if that is not specified, the underlying DOM form's method.\r
  79  */\r
  80 <div id="cfg-Ext.form.Action-params"></div>/**\r
  81  * @cfg {Mixed} params <p>Extra parameter values to pass. These are added to the Form's\r
  82  * {@link Ext.form.BasicForm#baseParams} and passed to the specified URL along with the Form's\r
  83  * input fields.</p>\r
  84  * <p>Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.</p>\r
  85  */\r
  86 <div id="cfg-Ext.form.Action-timeout"></div>/**\r
  87  * @cfg {Number} timeout The number of seconds to wait for a server response before\r
  88  * failing with the {@link #failureType} as {@link #Action.CONNECT_FAILURE}. If not specified,\r
  89  * defaults to the configured <tt>{@link Ext.form.BasicForm#timeout timeout}</tt> of the\r
  90  * {@link Ext.form.BasicForm form}.\r
  91  */\r
  92 <div id="cfg-Ext.form.Action-success"></div>/**\r
  93  * @cfg {Function} success The function to call when a valid success return packet is recieved.\r
  94  * The function is passed the following parameters:<ul class="mdetail-params">\r
  95  * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>\r
  96  * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. The {@link #result}\r
  97  * property of this object may be examined to perform custom postprocessing.</div></li>\r
  98  * </ul>\r
  99  */\r
 100 <div id="cfg-Ext.form.Action-failure"></div>/**\r
 101  * @cfg {Function} failure The function to call when a failure packet was recieved, or when an\r
 102  * error ocurred in the Ajax communication.\r
 103  * The function is passed the following parameters:<ul class="mdetail-params">\r
 104  * <li><b>form</b> : Ext.form.BasicForm<div class="sub-desc">The form that requested the action</div></li>\r
 105  * <li><b>action</b> : Ext.form.Action<div class="sub-desc">The Action class. If an Ajax\r
 106  * error ocurred, the failure type will be in {@link #failureType}. The {@link #result}\r
 107  * property of this object may be examined to perform custom postprocessing.</div></li>\r
 108  * </ul>\r
 109  */\r
 110 <div id="cfg-Ext.form.Action-scope"></div>/**\r
 111  * @cfg {Object} scope The scope in which to call the callback functions (The <tt>this</tt> reference\r
 112  * for the callback functions).\r
 113  */\r
 114 <div id="cfg-Ext.form.Action-waitMsg"></div>/**\r
 115  * @cfg {String} waitMsg The message to be displayed by a call to {@link Ext.MessageBox#wait}\r
 116  * during the time the action is being processed.\r
 117  */\r
 118 <div id="cfg-Ext.form.Action-waitTitle"></div>/**\r
 119  * @cfg {String} waitTitle The title to be displayed by a call to {@link Ext.MessageBox#wait}\r
 120  * during the time the action is being processed.\r
 121  */\r
 122 \r
 123 <div id="prop-Ext.form.Action-type"></div>/**\r
 124  * The type of action this Action instance performs.\r
 125  * Currently only "submit" and "load" are supported.\r
 126  * @type {String}\r
 127  */\r
 128     type : 'default',\r
 129 <div id="prop-Ext.form.Action-failureType"></div>/**\r
 130  * The type of failure detected will be one of these: {@link #CLIENT_INVALID},\r
 131  * {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}.  Usage:\r
 132  * <pre><code>\r
 133 var fp = new Ext.form.FormPanel({\r
 134 ...\r
 135 buttons: [{\r
 136     text: 'Save',\r
 137     formBind: true,\r
 138     handler: function(){\r
 139         if(fp.getForm().isValid()){\r
 140             fp.getForm().submit({\r
 141                 url: 'form-submit.php',\r
 142                 waitMsg: 'Submitting your data...',\r
 143                 success: function(form, action){\r
 144                     // server responded with success = true\r
 145                     var result = action.{@link #result};\r
 146                 },\r
 147                 failure: function(form, action){\r
 148                     if (action.{@link #failureType} === Ext.form.Action.{@link #CONNECT_FAILURE}) {\r
 149                         Ext.Msg.alert('Error',\r
 150                             'Status:'+action.{@link #response}.status+': '+\r
 151                             action.{@link #response}.statusText);\r
 152                     }\r
 153                     if (action.failureType === Ext.form.Action.{@link #SERVER_INVALID}){\r
 154                         // server responded with success = false\r
 155                         Ext.Msg.alert('Invalid', action.{@link #result}.errormsg);\r
 156                     }\r
 157                 }\r
 158             });\r
 159         }\r
 160     }\r
 161 },{\r
 162     text: 'Reset',\r
 163     handler: function(){\r
 164         fp.getForm().reset();\r
 165     }\r
 166 }]\r
 167  * </code></pre>\r
 168  * @property failureType\r
 169  * @type {String}\r
 170  */\r
 171  <div id="prop-Ext.form.Action-response"></div>/**\r
 172  * The XMLHttpRequest object used to perform the action.\r
 173  * @property response\r
 174  * @type {Object}\r
 175  */\r
 176  <div id="prop-Ext.form.Action-result"></div>/**\r
 177  * The decoded response object containing a boolean <tt style="font-weight:bold">success</tt> property and\r
 178  * other, action-specific properties.\r
 179  * @property result\r
 180  * @type {Object}\r
 181  */\r
 182 \r
 183     // interface method\r
 184     run : function(options){\r
 185 \r
 186     },\r
 187 \r
 188     // interface method\r
 189     success : function(response){\r
 190 \r
 191     },\r
 192 \r
 193     // interface method\r
 194     handleResponse : function(response){\r
 195 \r
 196     },\r
 197 \r
 198     // default connection failure\r
 199     failure : function(response){\r
 200         this.response = response;\r
 201         this.failureType = Ext.form.Action.CONNECT_FAILURE;\r
 202         this.form.afterAction(this, false);\r
 203     },\r
 204 \r
 205     // private\r
 206     // shared code among all Actions to validate that there was a response\r
 207     // with either responseText or responseXml\r
 208     processResponse : function(response){\r
 209         this.response = response;\r
 210         if(!response.responseText && !response.responseXML){\r
 211             return true;\r
 212         }\r
 213         this.result = this.handleResponse(response);\r
 214         return this.result;\r
 215     },\r
 216 \r
 217     // utility functions used internally\r
 218     getUrl : function(appendParams){\r
 219         var url = this.options.url || this.form.url || this.form.el.dom.action;\r
 220         if(appendParams){\r
 221             var p = this.getParams();\r
 222             if(p){\r
 223                 url = Ext.urlAppend(url, p);\r
 224             }\r
 225         }\r
 226         return url;\r
 227     },\r
 228 \r
 229     // private\r
 230     getMethod : function(){\r
 231         return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();\r
 232     },\r
 233 \r
 234     // private\r
 235     getParams : function(){\r
 236         var bp = this.form.baseParams;\r
 237         var p = this.options.params;\r
 238         if(p){\r
 239             if(typeof p == "object"){\r
 240                 p = Ext.urlEncode(Ext.applyIf(p, bp));\r
 241             }else if(typeof p == 'string' && bp){\r
 242                 p += '&' + Ext.urlEncode(bp);\r
 243             }\r
 244         }else if(bp){\r
 245             p = Ext.urlEncode(bp);\r
 246         }\r
 247         return p;\r
 248     },\r
 249 \r
 250     // private\r
 251     createCallback : function(opts){\r
 252         var opts = opts || {};\r
 253         return {\r
 254             success: this.success,\r
 255             failure: this.failure,\r
 256             scope: this,\r
 257             timeout: (opts.timeout*1000) || (this.form.timeout*1000),\r
 258             upload: this.form.fileUpload ? this.success : undefined\r
 259         };\r
 260     }\r
 261 };\r
 262 \r
 263 <div id="cls-Ext.form.Action.Submit"></div>/**\r
 264  * @class Ext.form.Action.Submit\r
 265  * @extends Ext.form.Action\r
 266  * <p>A class which handles submission of data from {@link Ext.form.BasicForm Form}s\r
 267  * and processes the returned response.</p>\r
 268  * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
 269  * {@link Ext.form.BasicForm#submit submit}ting.</p>\r
 270  * <p><u><b>Response Packet Criteria</b></u></p>\r
 271  * <p>A response packet may contain:\r
 272  * <div class="mdetail-params"><ul>\r
 273  * <li><b><code>success</code></b> property : Boolean\r
 274  * <div class="sub-desc">The <code>success</code> property is required.</div></li>\r
 275  * <li><b><code>errors</code></b> property : Object\r
 276  * <div class="sub-desc"><div class="sub-desc">The <code>errors</code> property,\r
 277  * which is optional, contains error messages for invalid fields.</div></li>\r
 278  * </ul></div>\r
 279  * <p><u><b>JSON Packets</b></u></p>\r
 280  * <p>By default, response packets are assumed to be JSON, so a typical response\r
 281  * packet may look like this:</p><pre><code>\r
 282 {\r
 283     success: false,\r
 284     errors: {\r
 285         clientCode: "Client not found",\r
 286         portOfLoading: "This field must not be null"\r
 287     }\r
 288 }</code></pre>\r
 289  * <p>Other data may be placed into the response for processing by the {@link Ext.form.BasicForm}'s callback\r
 290  * or event handler methods. The object decoded from this JSON is available in the\r
 291  * {@link Ext.form.Action#result result} property.</p>\r
 292  * <p>Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.XmlReader XmlReader}:</p><pre><code>\r
 293     errorReader: new Ext.data.XmlReader({\r
 294             record : 'field',\r
 295             success: '@success'\r
 296         }, [\r
 297             'id', 'msg'\r
 298         ]\r
 299     )\r
 300 </code></pre>\r
 301  * <p>then the results may be sent back in XML format:</p><pre><code>\r
 302 &lt;?xml version="1.0" encoding="UTF-8"?&gt;\r
 303 &lt;message success="false"&gt;\r
 304 &lt;errors&gt;\r
 305     &lt;field&gt;\r
 306         &lt;id&gt;clientCode&lt;/id&gt;\r
 307         &lt;msg&gt;&lt;![CDATA[Code not found. &lt;br /&gt;&lt;i&gt;This is a test validation message from the server &lt;/i&gt;]]&gt;&lt;/msg&gt;\r
 308     &lt;/field&gt;\r
 309     &lt;field&gt;\r
 310         &lt;id&gt;portOfLoading&lt;/id&gt;\r
 311         &lt;msg&gt;&lt;![CDATA[Port not found. &lt;br /&gt;&lt;i&gt;This is a test validation message from the server &lt;/i&gt;]]&gt;&lt;/msg&gt;\r
 312     &lt;/field&gt;\r
 313 &lt;/errors&gt;\r
 314 &lt;/message&gt;\r
 315 </code></pre>\r
 316  * <p>Other elements may be placed into the response XML for processing by the {@link Ext.form.BasicForm}'s callback\r
 317  * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.XmlReader#xmlData xmlData} property.</p>\r
 318  */\r
 319 Ext.form.Action.Submit = function(form, options){\r
 320     Ext.form.Action.Submit.superclass.constructor.call(this, form, options);\r
 321 };\r
 322 \r
 323 Ext.extend(Ext.form.Action.Submit, Ext.form.Action, {\r
 324     <div id="cfg-Ext.form.Action.Submit-errorReader"></div>/**\r
 325      * @cfg {Ext.data.DataReader} errorReader <p><b>Optional. JSON is interpreted with\r
 326      * no need for an errorReader.</b></p>\r
 327      * <p>A Reader which reads a single record from the returned data. The DataReader's\r
 328      * <b>success</b> property specifies how submission success is determined. The Record's\r
 329      * data provides the error messages to apply to any invalid form Fields.</p>\r
 330      */\r
 331     <div id="cfg-Ext.form.Action.Submit-clientValidation"></div>/**\r
 332      * @cfg {boolean} clientValidation Determines whether a Form's fields are validated\r
 333      * in a final call to {@link Ext.form.BasicForm#isValid isValid} prior to submission.\r
 334      * Pass <tt>false</tt> in the Form's submit options to prevent this. If not defined, pre-submission field validation\r
 335      * is performed.\r
 336      */\r
 337     type : 'submit',\r
 338 \r
 339     // private\r
 340     run : function(){\r
 341         var o = this.options;\r
 342         var method = this.getMethod();\r
 343         var isGet = method == 'GET';\r
 344         if(o.clientValidation === false || this.form.isValid()){\r
 345             Ext.Ajax.request(Ext.apply(this.createCallback(o), {\r
 346                 form:this.form.el.dom,\r
 347                 url:this.getUrl(isGet),\r
 348                 method: method,\r
 349                 headers: o.headers,\r
 350                 params:!isGet ? this.getParams() : null,\r
 351                 isUpload: this.form.fileUpload\r
 352             }));\r
 353         }else if (o.clientValidation !== false){ // client validation failed\r
 354             this.failureType = Ext.form.Action.CLIENT_INVALID;\r
 355             this.form.afterAction(this, false);\r
 356         }\r
 357     },\r
 358 \r
 359     // private\r
 360     success : function(response){\r
 361         var result = this.processResponse(response);\r
 362         if(result === true || result.success){\r
 363             this.form.afterAction(this, true);\r
 364             return;\r
 365         }\r
 366         if(result.errors){\r
 367             this.form.markInvalid(result.errors);\r
 368         }\r
 369         this.failureType = Ext.form.Action.SERVER_INVALID;\r
 370         this.form.afterAction(this, false);\r
 371     },\r
 372 \r
 373     // private\r
 374     handleResponse : function(response){\r
 375         if(this.form.errorReader){\r
 376             var rs = this.form.errorReader.read(response);\r
 377             var errors = [];\r
 378             if(rs.records){\r
 379                 for(var i = 0, len = rs.records.length; i < len; i++) {\r
 380                     var r = rs.records[i];\r
 381                     errors[i] = r.data;\r
 382                 }\r
 383             }\r
 384             if(errors.length < 1){\r
 385                 errors = null;\r
 386             }\r
 387             return {\r
 388                 success : rs.success,\r
 389                 errors : errors\r
 390             };\r
 391         }\r
 392         return Ext.decode(response.responseText);\r
 393     }\r
 394 });\r
 395 \r
 396 \r
 397 <div id="cls-Ext.form.Action.Load"></div>/**\r
 398  * @class Ext.form.Action.Load\r
 399  * @extends Ext.form.Action\r
 400  * <p>A class which handles loading of data from a server into the Fields of an {@link Ext.form.BasicForm}.</p>\r
 401  * <p>Instances of this class are only created by a {@link Ext.form.BasicForm Form} when\r
 402  * {@link Ext.form.BasicForm#load load}ing.</p>\r
 403  * <p><u><b>Response Packet Criteria</b></u></p>\r
 404  * <p>A response packet <b>must</b> contain:\r
 405  * <div class="mdetail-params"><ul>\r
 406  * <li><b><code>success</code></b> property : Boolean</li>\r
 407  * <li><b><code>data</code></b> property : Object</li>\r
 408  * <div class="sub-desc">The <code>data</code> property contains the values of Fields to load.\r
 409  * The individual value object for each Field is passed to the Field's\r
 410  * {@link Ext.form.Field#setValue setValue} method.</div></li>\r
 411  * </ul></div>\r
 412  * <p><u><b>JSON Packets</b></u></p>\r
 413  * <p>By default, response packets are assumed to be JSON, so for the following form load call:<pre><code>\r
 414 var myFormPanel = new Ext.form.FormPanel({\r
 415     title: 'Client and routing info',\r
 416     items: [{\r
 417         fieldLabel: 'Client',\r
 418         name: 'clientName'\r
 419     }, {\r
 420         fieldLabel: 'Port of loading',\r
 421         name: 'portOfLoading'\r
 422     }, {\r
 423         fieldLabel: 'Port of discharge',\r
 424         name: 'portOfDischarge'\r
 425     }]\r
 426 });\r
 427 myFormPanel.{@link Ext.form.FormPanel#getForm getForm}().{@link Ext.form.BasicForm#load load}({\r
 428     url: '/getRoutingInfo.php',\r
 429     params: {\r
 430         consignmentRef: myConsignmentRef\r
 431     },\r
 432     failure: function(form, action) {\r
 433         Ext.Msg.alert("Load failed", action.result.errorMessage);\r
 434     }\r
 435 });\r
 436 </code></pre>\r
 437  * a <b>success response</b> packet may look like this:</p><pre><code>\r
 438 {\r
 439     success: true,\r
 440     data: {\r
 441         clientName: "Fred. Olsen Lines",\r
 442         portOfLoading: "FXT",\r
 443         portOfDischarge: "OSL"\r
 444     }\r
 445 }</code></pre>\r
 446  * while a <b>failure response</b> packet may look like this:</p><pre><code>\r
 447 {\r
 448     success: false,\r
 449     errorMessage: "Consignment reference not found"\r
 450 }</code></pre>\r
 451  * <p>Other data may be placed into the response for processing the {@link Ext.form.BasicForm Form}'s\r
 452  * callback or event handler methods. The object decoded from this JSON is available in the\r
 453  * {@link Ext.form.Action#result result} property.</p>\r
 454  */\r
 455 Ext.form.Action.Load = function(form, options){\r
 456     Ext.form.Action.Load.superclass.constructor.call(this, form, options);\r
 457     this.reader = this.form.reader;\r
 458 };\r
 459 \r
 460 Ext.extend(Ext.form.Action.Load, Ext.form.Action, {\r
 461     // private\r
 462     type : 'load',\r
 463 \r
 464     // private\r
 465     run : function(){\r
 466         Ext.Ajax.request(Ext.apply(\r
 467                 this.createCallback(this.options), {\r
 468                     method:this.getMethod(),\r
 469                     url:this.getUrl(false),\r
 470                     headers: this.options.headers,\r
 471                     params:this.getParams()\r
 472         }));\r
 473     },\r
 474 \r
 475     // private\r
 476     success : function(response){\r
 477         var result = this.processResponse(response);\r
 478         if(result === true || !result.success || !result.data){\r
 479             this.failureType = Ext.form.Action.LOAD_FAILURE;\r
 480             this.form.afterAction(this, false);\r
 481             return;\r
 482         }\r
 483         this.form.clearInvalid();\r
 484         this.form.setValues(result.data);\r
 485         this.form.afterAction(this, true);\r
 486     },\r
 487 \r
 488     // private\r
 489     handleResponse : function(response){\r
 490         if(this.form.reader){\r
 491             var rs = this.form.reader.read(response);\r
 492             var data = rs.records && rs.records[0] ? rs.records[0].data : null;\r
 493             return {\r
 494                 success : rs.success,\r
 495                 data : data\r
 496             };\r
 497         }\r
 498         return Ext.decode(response.responseText);\r
 499     }\r
 500 });\r
 501 \r
 502 \r
 503 \r
 504 <div id="cls-Ext.form.Action.DirectLoad"></div>/**\r
 505  * @class Ext.form.Action.DirectLoad\r
 506  * @extends Ext.form.Action.Load\r
 507  * <p>Provides Ext.direct support for loading form data.</p>\r
 508  * <p>This example illustrates usage of Ext.Direct to <b>load</b> a form through Ext.Direct.</p>\r
 509  * <pre><code>\r
 510 var myFormPanel = new Ext.form.FormPanel({\r
 511     // configs for FormPanel\r
 512     title: 'Basic Information',\r
 513     renderTo: document.body,\r
 514     width: 300, height: 160,\r
 515     padding: 10,\r
 516 \r
 517     // configs apply to child items\r
 518     defaults: {anchor: '100%'},\r
 519     defaultType: 'textfield',\r
 520     items: [{\r
 521         fieldLabel: 'Name',\r
 522         name: 'name'\r
 523     },{\r
 524         fieldLabel: 'Email',\r
 525         name: 'email'\r
 526     },{\r
 527         fieldLabel: 'Company',\r
 528         name: 'company'\r
 529     }],\r
 530 \r
 531     // configs for BasicForm\r
 532     api: {\r
 533         // The server-side method to call for load() requests\r
 534         load: Profile.getBasicInfo,\r
 535         // The server-side must mark the submit handler as a 'formHandler'\r
 536         submit: Profile.updateBasicInfo\r
 537     },\r
 538     // specify the order for the passed params\r
 539     paramOrder: ['uid', 'foo']\r
 540 });\r
 541 \r
 542 // load the form\r
 543 myFormPanel.getForm().load({\r
 544     // pass 2 arguments to server side getBasicInfo method (len=2)\r
 545     params: {\r
 546         foo: 'bar',\r
 547         uid: 34\r
 548     }\r
 549 });\r
 550  * </code></pre>\r
 551  * The data packet sent to the server will resemble something like:\r
 552  * <pre><code>\r
 553 [\r
 554     {\r
 555         "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,\r
 556         "data":[34,"bar"] // note the order of the params\r
 557     }\r
 558 ]\r
 559  * </code></pre>\r
 560  * The form will process a data packet returned by the server that is similar\r
 561  * to the following format:\r
 562  * <pre><code>\r
 563 [\r
 564     {\r
 565         "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,\r
 566         "result":{\r
 567             "success":true,\r
 568             "data":{\r
 569                 "name":"Fred Flintstone",\r
 570                 "company":"Slate Rock and Gravel",\r
 571                 "email":"fred.flintstone@slaterg.com"\r
 572             }\r
 573         }\r
 574     }\r
 575 ]\r
 576  * </code></pre>\r
 577  */\r
 578 Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, {\r
 579     constructor: function(form, opts) {\r
 580         Ext.form.Action.DirectLoad.superclass.constructor.call(this, form, opts);\r
 581     },\r
 582     type : 'directload',\r
 583 \r
 584     run : function(){\r
 585         var args = this.getParams();\r
 586         args.push(this.success, this);\r
 587         this.form.api.load.apply(window, args);\r
 588     },\r
 589 \r
 590     getParams : function() {\r
 591         var buf = [], o = {};\r
 592         var bp = this.form.baseParams;\r
 593         var p = this.options.params;\r
 594         Ext.apply(o, p, bp);\r
 595         var paramOrder = this.form.paramOrder;\r
 596         if(paramOrder){\r
 597             for(var i = 0, len = paramOrder.length; i < len; i++){\r
 598                 buf.push(o[paramOrder[i]]);\r
 599             }\r
 600         }else if(this.form.paramsAsHash){\r
 601             buf.push(o);\r
 602         }\r
 603         return buf;\r
 604     },\r
 605     // Direct actions have already been processed and therefore\r
 606     // we can directly set the result; Direct Actions do not have\r
 607     // a this.response property.\r
 608     processResponse : function(result) {\r
 609         this.result = result;\r
 610         return result;\r
 611     },\r
 612     \r
 613     success : function(response, trans){\r
 614         if(trans.type == Ext.Direct.exceptions.SERVER){\r
 615             response = {};\r
 616         }\r
 617         Ext.form.Action.DirectLoad.superclass.success.call(this, response);\r
 618     }\r
 619 });\r
 620 \r
 621 <div id="cls-Ext.form.Action.DirectSubmit"></div>/**\r
 622  * @class Ext.form.Action.DirectSubmit\r
 623  * @extends Ext.form.Action.Submit\r
 624  * <p>Provides Ext.direct support for submitting form data.</p>\r
 625  * <p>This example illustrates usage of Ext.Direct to <b>submit</b> a form through Ext.Direct.</p>\r
 626  * <pre><code>\r
 627 var myFormPanel = new Ext.form.FormPanel({\r
 628     // configs for FormPanel\r
 629     title: 'Basic Information',\r
 630     renderTo: document.body,\r
 631     width: 300, height: 160,\r
 632     padding: 10,\r
 633     buttons:[{\r
 634         text: 'Submit',\r
 635         handler: function(){\r
 636             myFormPanel.getForm().submit({\r
 637                 params: {\r
 638                     foo: 'bar',\r
 639                     uid: 34\r
 640                 }\r
 641             });\r
 642         }\r
 643     }],\r
 644 \r
 645     // configs apply to child items\r
 646     defaults: {anchor: '100%'},\r
 647     defaultType: 'textfield',\r
 648     items: [{\r
 649         fieldLabel: 'Name',\r
 650         name: 'name'\r
 651     },{\r
 652         fieldLabel: 'Email',\r
 653         name: 'email'\r
 654     },{\r
 655         fieldLabel: 'Company',\r
 656         name: 'company'\r
 657     }],\r
 658 \r
 659     // configs for BasicForm\r
 660     api: {\r
 661         // The server-side method to call for load() requests\r
 662         load: Profile.getBasicInfo,\r
 663         // The server-side must mark the submit handler as a 'formHandler'\r
 664         submit: Profile.updateBasicInfo\r
 665     },\r
 666     // specify the order for the passed params\r
 667     paramOrder: ['uid', 'foo']\r
 668 });\r
 669  * </code></pre>\r
 670  * The data packet sent to the server will resemble something like:\r
 671  * <pre><code>\r
 672 {\r
 673     "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",\r
 674     "result":{\r
 675         "success":true,\r
 676         "id":{\r
 677             "extAction":"Profile","extMethod":"updateBasicInfo",\r
 678             "extType":"rpc","extTID":"6","extUpload":"false",\r
 679             "name":"Aaron Conran","email":"aaron@extjs.com","company":"Ext JS, LLC"\r
 680         }\r
 681     }\r
 682 }\r
 683  * </code></pre>\r
 684  * The form will process a data packet returned by the server that is similar\r
 685  * to the following:\r
 686  * <pre><code>\r
 687 // sample success packet (batched requests)\r
 688 [\r
 689     {\r
 690         "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,\r
 691         "result":{\r
 692             "success":true\r
 693         }\r
 694     }\r
 695 ]\r
 696 \r
 697 // sample failure packet (one request)\r
 698 {\r
 699         "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",\r
 700         "result":{\r
 701             "errors":{\r
 702                 "email":"already taken"\r
 703             },\r
 704             "success":false,\r
 705             "foo":"bar"\r
 706         }\r
 707 }\r
 708  * </code></pre>\r
 709  * Also see the discussion in {@link Ext.form.Action.DirectLoad}.\r
 710  */\r
 711 Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, {\r
 712     constructor : function(form, opts) {\r
 713         Ext.form.Action.DirectSubmit.superclass.constructor.call(this, form, opts);\r
 714     },\r
 715     type : 'directsubmit',\r
 716     // override of Submit\r
 717     run : function(){\r
 718         var o = this.options;\r
 719         if(o.clientValidation === false || this.form.isValid()){\r
 720             // tag on any additional params to be posted in the\r
 721             // form scope\r
 722             this.success.params = this.getParams();\r
 723             this.form.api.submit(this.form.el.dom, this.success, this);\r
 724         }else if (o.clientValidation !== false){ // client validation failed\r
 725             this.failureType = Ext.form.Action.CLIENT_INVALID;\r
 726             this.form.afterAction(this, false);\r
 727         }\r
 728     },\r
 729 \r
 730     getParams : function() {\r
 731         var o = {};\r
 732         var bp = this.form.baseParams;\r
 733         var p = this.options.params;\r
 734         Ext.apply(o, p, bp);\r
 735         return o;\r
 736     },\r
 737     // Direct actions have already been processed and therefore\r
 738     // we can directly set the result; Direct Actions do not have\r
 739     // a this.response property.\r
 740     processResponse : function(result) {\r
 741         this.result = result;\r
 742         return result;\r
 743     },\r
 744     \r
 745     success : function(response, trans){\r
 746         if(trans.type == Ext.Direct.exceptions.SERVER){\r
 747             response = {};\r
 748         }\r
 749         Ext.form.Action.DirectSubmit.superclass.success.call(this, response);\r
 750     }\r
 751 });\r
 752 \r
 753 Ext.form.Action.ACTION_TYPES = {\r
 754     'load' : Ext.form.Action.Load,\r
 755     'submit' : Ext.form.Action.Submit,\r
 756     'directload' : Ext.form.Action.DirectLoad,\r
 757     'directsubmit' : Ext.form.Action.DirectSubmit\r
 758 };\r
 759 </pre>
 760 </body>
 761 </html>