Submit.html 9.2 KB

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