DirectLoad.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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-DirectLoad'>/**
  19. </span> * Provides {@link Ext.direct.Manager} support for loading form data.
  20. *
  21. * This example illustrates usage of Ext.direct.Direct to **load** 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. *
  30. * // configs apply to child items
  31. * defaults: {anchor: '100%'},
  32. * defaultType: 'textfield',
  33. * items: [{
  34. * fieldLabel: 'Name',
  35. * name: 'name'
  36. * },{
  37. * fieldLabel: 'Email',
  38. * name: 'email'
  39. * },{
  40. * fieldLabel: 'Company',
  41. * name: 'company'
  42. * }],
  43. *
  44. * // configs for BasicForm
  45. * api: {
  46. * // The server-side method to call for load() requests
  47. * load: Profile.getBasicInfo,
  48. * // The server-side must mark the submit handler as a 'formHandler'
  49. * submit: Profile.updateBasicInfo
  50. * },
  51. * // specify the order for the passed params
  52. * paramOrder: ['uid', 'foo']
  53. * });
  54. *
  55. * // load the form
  56. * myFormPanel.getForm().load({
  57. * // pass 2 arguments to server side getBasicInfo method (len=2)
  58. * params: {
  59. * foo: 'bar',
  60. * uid: 34
  61. * }
  62. * });
  63. *
  64. * The data packet sent to the server will resemble something like:
  65. *
  66. * [
  67. * {
  68. * &quot;action&quot;:&quot;Profile&quot;,&quot;method&quot;:&quot;getBasicInfo&quot;,&quot;type&quot;:&quot;rpc&quot;,&quot;tid&quot;:2,
  69. * &quot;data&quot;:[34,&quot;bar&quot;] // note the order of the params
  70. * }
  71. * ]
  72. *
  73. * The form will process a data packet returned by the server that is similar to the following format:
  74. *
  75. * [
  76. * {
  77. * &quot;action&quot;:&quot;Profile&quot;,&quot;method&quot;:&quot;getBasicInfo&quot;,&quot;type&quot;:&quot;rpc&quot;,&quot;tid&quot;:2,
  78. * &quot;result&quot;:{
  79. * &quot;success&quot;:true,
  80. * &quot;data&quot;:{
  81. * &quot;name&quot;:&quot;Fred Flintstone&quot;,
  82. * &quot;company&quot;:&quot;Slate Rock and Gravel&quot;,
  83. * &quot;email&quot;:&quot;fred.flintstone@slaterg.com&quot;
  84. * }
  85. * }
  86. * }
  87. * ]
  88. */
  89. Ext.define('Ext.form.action.DirectLoad', {
  90. extend:'Ext.form.action.Load',
  91. requires: ['Ext.direct.Manager'],
  92. alternateClassName: 'Ext.form.Action.DirectLoad',
  93. alias: 'formaction.directload',
  94. type: 'directload',
  95. run: function() {
  96. var me = this,
  97. form = me.form,
  98. fn = form.api.load,
  99. method = fn.directCfg.method,
  100. args = method.getArgs(me.getParams(), form.paramOrder, form.paramsAsHash);
  101. args.push(me.onComplete, me);
  102. fn.apply(window, args);
  103. },
  104. // Direct actions have already been processed and therefore
  105. // we can directly set the result; Direct Actions do not have
  106. // a this.response property.
  107. processResponse: function(result) {
  108. return (this.result = result);
  109. },
  110. onComplete: function(data, response) {
  111. if (data) {
  112. this.onSuccess(data);
  113. } else {
  114. this.onFailure(null);
  115. }
  116. }
  117. });
  118. </pre>
  119. </body>
  120. </html>