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