docs/source/DirectSubmit.html

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