docs/source/Submit.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-action-Submit'>/**
  19 </span> * @class Ext.form.action.Submit
  20  * @extends Ext.form.action.Action
  21  * &lt;p&gt;A class which handles submission of data from {@link Ext.form.Basic Form}s
  22  * and processes the returned response.&lt;/p&gt;
  23  * &lt;p&gt;Instances of this class are only created by a {@link Ext.form.Basic Form} when
  24  * {@link Ext.form.Basic#submit submit}ting.&lt;/p&gt;
  25  * &lt;p&gt;&lt;u&gt;&lt;b&gt;Response Packet Criteria&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
  26  * &lt;p&gt;A response packet may contain:
  27  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  28  * &lt;li&gt;&lt;b&gt;&lt;code&gt;success&lt;/code&gt;&lt;/b&gt; property : Boolean
  29  * &lt;div class=&quot;sub-desc&quot;&gt;The &lt;code&gt;success&lt;/code&gt; property is required.&lt;/div&gt;&lt;/li&gt;
  30  * &lt;li&gt;&lt;b&gt;&lt;code&gt;errors&lt;/code&gt;&lt;/b&gt; property : Object
  31  * &lt;div class=&quot;sub-desc&quot;&gt;&lt;div class=&quot;sub-desc&quot;&gt;The &lt;code&gt;errors&lt;/code&gt; property,
  32  * which is optional, contains error messages for invalid fields.&lt;/div&gt;&lt;/li&gt;
  33  * &lt;/ul&gt;&lt;/div&gt;
  34  * &lt;p&gt;&lt;u&gt;&lt;b&gt;JSON Packets&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
  35  * &lt;p&gt;By default, response packets are assumed to be JSON, so a typical response
  36  * packet may look like this:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
  37 {
  38     success: false,
  39     errors: {
  40         clientCode: &quot;Client not found&quot;,
  41         portOfLoading: &quot;This field must not be null&quot;
  42     }
  43 }&lt;/code&gt;&lt;/pre&gt;
  44  * &lt;p&gt;Other data may be placed into the response for processing by the {@link Ext.form.Basic}'s callback
  45  * or event handler methods. The object decoded from this JSON is available in the
  46  * {@link Ext.form.action.Action#result result} property.&lt;/p&gt;
  47  * &lt;p&gt;Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.reader.Xml XmlReader}:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
  48     errorReader: new Ext.data.reader.Xml({
  49             record : 'field',
  50             success: '@success'
  51         }, [
  52             'id', 'msg'
  53         ]
  54     )
  55 &lt;/code&gt;&lt;/pre&gt;
  56  * &lt;p&gt;then the results may be sent back in XML format:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
  57 &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt;
  58 &amp;lt;message success=&quot;false&quot;&amp;gt;
  59 &amp;lt;errors&amp;gt;
  60     &amp;lt;field&amp;gt;
  61         &amp;lt;id&amp;gt;clientCode&amp;lt;/id&amp;gt;
  62         &amp;lt;msg&amp;gt;&amp;lt;![CDATA[Code not found. &amp;lt;br /&amp;gt;&amp;lt;i&amp;gt;This is a test validation message from the server &amp;lt;/i&amp;gt;]]&amp;gt;&amp;lt;/msg&amp;gt;
  63     &amp;lt;/field&amp;gt;
  64     &amp;lt;field&amp;gt;
  65         &amp;lt;id&amp;gt;portOfLoading&amp;lt;/id&amp;gt;
  66         &amp;lt;msg&amp;gt;&amp;lt;![CDATA[Port not found. &amp;lt;br /&amp;gt;&amp;lt;i&amp;gt;This is a test validation message from the server &amp;lt;/i&amp;gt;]]&amp;gt;&amp;lt;/msg&amp;gt;
  67     &amp;lt;/field&amp;gt;
  68 &amp;lt;/errors&amp;gt;
  69 &amp;lt;/message&amp;gt;
  70 &lt;/code&gt;&lt;/pre&gt;
  71  * &lt;p&gt;Other elements may be placed into the response XML for processing by the {@link Ext.form.Basic}'s callback
  72  * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.reader.Xml#xmlData xmlData} property.&lt;/p&gt;
  73  */
  74 Ext.define('Ext.form.action.Submit', {
  75     extend:'Ext.form.action.Action',
  76     alternateClassName: 'Ext.form.Action.Submit',
  77     alias: 'formaction.submit',
  78
  79     type: 'submit',
  80
  81 <span id='Ext-form-action-Submit-cfg-clientValidation'>    /**
  82 </span>     * @cfg {boolean} clientValidation Determines whether a Form's fields are validated
  83      * in a final call to {@link Ext.form.Basic#isValid isValid} prior to submission.
  84      * Pass &lt;tt&gt;false&lt;/tt&gt; in the Form's submit options to prevent this. Defaults to true.
  85      */
  86
  87     // inherit docs
  88     run : function(){
  89         var form = this.form;
  90         if (this.clientValidation === false || form.isValid()) {
  91             this.doSubmit();
  92         } else {
  93             // client validation failed
  94             this.failureType = Ext.form.action.Action.CLIENT_INVALID;
  95             form.afterAction(this, false);
  96         }
  97     },
  98
  99 <span id='Ext-form-action-Submit-method-doSubmit'>    /**
 100 </span>     * @private
 101      * Perform the submit of the form data.
 102      */
 103     doSubmit: function() {
 104         var formEl,
 105             ajaxOptions = Ext.apply(this.createCallback(), {
 106                 url: this.getUrl(),
 107                 method: this.getMethod(),
 108                 headers: this.headers
 109             });
 110
 111         // For uploads we need to create an actual form that contains the file upload fields,
 112         // and pass that to the ajax call so it can do its iframe-based submit method.
 113         if (this.form.hasUpload()) {
 114             formEl = ajaxOptions.form = this.buildForm();
 115             ajaxOptions.isUpload = true;
 116         } else {
 117             ajaxOptions.params = this.getParams();
 118         }
 119
 120         Ext.Ajax.request(ajaxOptions);
 121
 122         if (formEl) {
 123             Ext.removeNode(formEl);
 124         }
 125     },
 126
 127 <span id='Ext-form-action-Submit-method-getParams'>    /**
 128 </span>     * @private
 129      * Build the full set of parameters from the field values plus any additional configured params.
 130      */
 131     getParams: function() {
 132         var nope = false,
 133             configParams = this.callParent(),
 134             fieldParams = this.form.getValues(nope, nope, this.submitEmptyText !== nope);
 135         return Ext.apply({}, fieldParams, configParams);
 136     },
 137
 138 <span id='Ext-form-action-Submit-method-buildForm'>    /**
 139 </span>     * @private
 140      * Build a form element containing fields corresponding to all the parameters to be
 141      * submitted (everything returned by {@link #getParams}.
 142      * NOTE: the form element is automatically added to the DOM, so any code that uses
 143      * it must remove it from the DOM after finishing with it.
 144      * @return HTMLFormElement
 145      */
 146     buildForm: function() {
 147         var fieldsSpec = [],
 148             formSpec,
 149             formEl,
 150             basicForm = this.form,
 151             params = this.getParams(),
 152             uploadFields = [];
 153
 154         basicForm.getFields().each(function(field) {
 155             if (field.isFileUpload()) {
 156                 uploadFields.push(field);
 157             }
 158         });
 159
 160         function addField(name, val) {
 161             fieldsSpec.push({
 162                 tag: 'input',
 163                 type: 'hidden',
 164                 name: name,
 165                 value: Ext.String.htmlEncode(val)
 166             });
 167         }
 168
 169         // Add the form field values
 170         Ext.iterate(params, function(key, val) {
 171             if (Ext.isArray(val)) {
 172                 Ext.each(val, function(v) {
 173                     addField(key, v);
 174                 });
 175             } else {
 176                 addField(key, val);
 177             }
 178         });
 179
 180         formSpec = {
 181             tag: 'form',
 182             action: this.getUrl(),
 183             method: this.getMethod(),
 184             target: this.target || '_self',
 185             style: 'display:none',
 186             cn: fieldsSpec
 187         };
 188
 189         // Set the proper encoding for file uploads
 190         if (uploadFields.length) {
 191             formSpec.encoding = formSpec.enctype = 'multipart/form-data';
 192         }
 193
 194         // Create the form
 195         formEl = Ext.core.DomHelper.append(Ext.getBody(), formSpec);
 196
 197         // Special handling for file upload fields: since browser security measures prevent setting
 198         // their values programatically, and prevent carrying their selected values over when cloning,
 199         // we have to move the actual field instances out of their components and into the form.
 200         Ext.Array.each(uploadFields, function(field) {
 201             if (field.rendered) { // can only have a selected file value after being rendered
 202                 formEl.appendChild(field.extractFileInput());
 203             }
 204         });
 205
 206         return formEl;
 207     },
 208
 209
 210
 211 <span id='Ext-form-action-Submit-method-onSuccess'>    /**
 212 </span>     * @private
 213      */
 214     onSuccess: function(response) {
 215         var form = this.form,
 216             success = true,
 217             result = this.processResponse(response);
 218         if (result !== true &amp;&amp; !result.success) {
 219             if (result.errors) {
 220                 form.markInvalid(result.errors);
 221             }
 222             this.failureType = Ext.form.action.Action.SERVER_INVALID;
 223             success = false;
 224         }
 225         form.afterAction(this, success);
 226     },
 227
 228 <span id='Ext-form-action-Submit-method-handleResponse'>    /**
 229 </span>     * @private
 230      */
 231     handleResponse: function(response) {
 232         var form = this.form,
 233             errorReader = form.errorReader,
 234             rs, errors, i, len, records;
 235         if (errorReader) {
 236             rs = errorReader.read(response);
 237             records = rs.records;
 238             errors = [];
 239             if (records) {
 240                 for(i = 0, len = records.length; i &lt; len; i++) {
 241                     errors[i] = records[i].data;
 242                 }
 243             }
 244             if (errors.length &lt; 1) {
 245                 errors = null;
 246             }
 247             return {
 248                 success : rs.success,
 249                 errors : errors
 250             };
 251         }
 252         return Ext.decode(response.responseText);
 253     }
 254 });
 255 </pre>
 256 </body>
 257 </html>