src/form/action/DirectSubmit.js

   1 /**
   2  * @class Ext.form.action.DirectSubmit
   3  * @extends Ext.form.action.Submit
   4  * <p>Provides Ext.direct support for submitting form data.</p>
   5  * <p>This example illustrates usage of Ext.direct.Direct to <b>submit</b> a form through Ext.Direct.</p>
   6  * <pre><code>
   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  * </code></pre>
  50  * The data packet sent to the server will resemble something like:
  51  * <pre><code>
  52 {
  53     "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
  54     "result":{
  55         "success":true,
  56         "id":{
  57             "extAction":"Profile","extMethod":"updateBasicInfo",
  58             "extType":"rpc","extTID":"6","extUpload":"false",
  59             "name":"Aaron Conran","email":"aaron@sencha.com","company":"Sencha Inc."
  60         }
  61     }
  62 }
  63  * </code></pre>
  64  * The form will process a data packet returned by the server that is similar
  65  * to the following:
  66  * <pre><code>
  67 // sample success packet (batched requests)
  68 [
  69     {
  70         "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
  71         "result":{
  72             "success":true
  73         }
  74     }
  75 ]
  76
  77 // sample failure packet (one request)
  78 {
  79         "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
  80         "result":{
  81             "errors":{
  82                 "email":"already taken"
  83             },
  84             "success":false,
  85             "foo":"bar"
  86         }
  87 }
  88  * </code></pre>
  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 });