DirectSubmit.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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-DirectSubmit'>/**
  19. </span> * Provides Ext.direct support for submitting form data.
  20. *
  21. * This example illustrates usage of Ext.direct.Direct to **submit** a form through Ext.Direct.
  22. *
  23. * var myFormPanel = new Ext.form.Panel({
  24. * // configs for FormPanel
  25. * title: 'Basic Information',
  26. * renderTo: document.body,
  27. * width: 300, height: 160,
  28. * padding: 10,
  29. * buttons:[{
  30. * text: 'Submit',
  31. * handler: function(){
  32. * myFormPanel.getForm().submit({
  33. * params: {
  34. * foo: 'bar',
  35. * uid: 34
  36. * }
  37. * });
  38. * }
  39. * }],
  40. *
  41. * // configs apply to child items
  42. * defaults: {anchor: '100%'},
  43. * defaultType: 'textfield',
  44. * items: [{
  45. * fieldLabel: 'Name',
  46. * name: 'name'
  47. * },{
  48. * fieldLabel: 'Email',
  49. * name: 'email'
  50. * },{
  51. * fieldLabel: 'Company',
  52. * name: 'company'
  53. * }],
  54. *
  55. * // configs for BasicForm
  56. * api: {
  57. * // The server-side method to call for load() requests
  58. * load: Profile.getBasicInfo,
  59. * // The server-side must mark the submit handler as a 'formHandler'
  60. * submit: Profile.updateBasicInfo
  61. * },
  62. * // specify the order for the passed params
  63. * paramOrder: ['uid', 'foo']
  64. * });
  65. *
  66. * The data packet sent to the server will resemble something like:
  67. *
  68. * {
  69. * &quot;action&quot;:&quot;Profile&quot;,&quot;method&quot;:&quot;updateBasicInfo&quot;,&quot;type&quot;:&quot;rpc&quot;,&quot;tid&quot;:&quot;6&quot;,
  70. * &quot;result&quot;:{
  71. * &quot;success&quot;:true,
  72. * &quot;id&quot;:{
  73. * &quot;extAction&quot;:&quot;Profile&quot;,&quot;extMethod&quot;:&quot;updateBasicInfo&quot;,
  74. * &quot;extType&quot;:&quot;rpc&quot;,&quot;extTID&quot;:&quot;6&quot;,&quot;extUpload&quot;:&quot;false&quot;,
  75. * &quot;name&quot;:&quot;Aaron Conran&quot;,&quot;email&quot;:&quot;aaron@sencha.com&quot;,&quot;company&quot;:&quot;Sencha Inc.&quot;
  76. * }
  77. * }
  78. * }
  79. *
  80. * The form will process a data packet returned by the server that is similar to the following:
  81. *
  82. * // sample success packet (batched requests)
  83. * [
  84. * {
  85. * &quot;action&quot;:&quot;Profile&quot;,&quot;method&quot;:&quot;updateBasicInfo&quot;,&quot;type&quot;:&quot;rpc&quot;,&quot;tid&quot;:3,
  86. * &quot;result&quot;:{
  87. * &quot;success&quot;:true
  88. * }
  89. * }
  90. * ]
  91. *
  92. * // sample failure packet (one request)
  93. * {
  94. * &quot;action&quot;:&quot;Profile&quot;,&quot;method&quot;:&quot;updateBasicInfo&quot;,&quot;type&quot;:&quot;rpc&quot;,&quot;tid&quot;:&quot;6&quot;,
  95. * &quot;result&quot;:{
  96. * &quot;errors&quot;:{
  97. * &quot;email&quot;:&quot;already taken&quot;
  98. * },
  99. * &quot;success&quot;:false,
  100. * &quot;foo&quot;:&quot;bar&quot;
  101. * }
  102. * }
  103. *
  104. * Also see the discussion in {@link Ext.form.action.DirectLoad}.
  105. */
  106. Ext.define('Ext.form.action.DirectSubmit', {
  107. extend:'Ext.form.action.Submit',
  108. requires: ['Ext.direct.Manager'],
  109. alternateClassName: 'Ext.form.Action.DirectSubmit',
  110. alias: 'formaction.directsubmit',
  111. type: 'directsubmit',
  112. doSubmit: function() {
  113. var me = this,
  114. callback = Ext.Function.bind(me.onComplete, me),
  115. formEl = me.buildForm();
  116. me.form.api.submit(formEl, callback, me);
  117. Ext.removeNode(formEl);
  118. },
  119. // Direct actions have already been processed and therefore
  120. // we can directly set the result; Direct Actions do not have
  121. // a this.response property.
  122. processResponse: function(result) {
  123. return (this.result = result);
  124. },
  125. onComplete: function(data, response){
  126. if (data) {
  127. this.onSuccess(data);
  128. } else {
  129. this.onFailure(null);
  130. }
  131. }
  132. });
  133. </pre>
  134. </body>
  135. </html>