Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Submit.html
diff --git a/docs/source/Submit.html b/docs/source/Submit.html
new file mode 100644 (file)
index 0000000..9f368c0
--- /dev/null
@@ -0,0 +1,238 @@
+<!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.Submit'>/**
+</span> * @class Ext.form.action.Submit
+ * @extends Ext.form.action.Action
+ * &lt;p&gt;A class which handles submission of data from {@link Ext.form.Basic Form}s
+ * and processes the returned response.&lt;/p&gt;
+ * &lt;p&gt;Instances of this class are only created by a {@link Ext.form.Basic Form} when
+ * {@link Ext.form.Basic#submit submit}ting.&lt;/p&gt;
+ * &lt;p&gt;&lt;u&gt;&lt;b&gt;Response Packet Criteria&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
+ * &lt;p&gt;A response packet may contain:
+ * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+ * &lt;li&gt;&lt;b&gt;&lt;code&gt;success&lt;/code&gt;&lt;/b&gt; property : Boolean
+ * &lt;div class=&quot;sub-desc&quot;&gt;The &lt;code&gt;success&lt;/code&gt; property is required.&lt;/div&gt;&lt;/li&gt;
+ * &lt;li&gt;&lt;b&gt;&lt;code&gt;errors&lt;/code&gt;&lt;/b&gt; property : Object
+ * &lt;div class=&quot;sub-desc&quot;&gt;&lt;div class=&quot;sub-desc&quot;&gt;The &lt;code&gt;errors&lt;/code&gt; property,
+ * which is optional, contains error messages for invalid fields.&lt;/div&gt;&lt;/li&gt;
+ * &lt;/ul&gt;&lt;/div&gt;
+ * &lt;p&gt;&lt;u&gt;&lt;b&gt;JSON Packets&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
+ * &lt;p&gt;By default, response packets are assumed to be JSON, so a typical response
+ * packet may look like this:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
+{
+    success: false,
+    errors: {
+        clientCode: &quot;Client not found&quot;,
+        portOfLoading: &quot;This field must not be null&quot;
+    }
+}&lt;/code&gt;&lt;/pre&gt;
+ * &lt;p&gt;Other data may be placed into the response for processing by the {@link Ext.form.Basic}'s callback
+ * or event handler methods. The object decoded from this JSON is available in the
+ * {@link Ext.form.action.Action#result result} property.&lt;/p&gt;
+ * &lt;p&gt;Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.reader.Xml XmlReader}:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
+    errorReader: new Ext.data.reader.Xml({
+            record : 'field',
+            success: '@success'
+        }, [
+            'id', 'msg'
+        ]
+    )
+&lt;/code&gt;&lt;/pre&gt;
+ * &lt;p&gt;then the results may be sent back in XML format:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
+&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt;
+&amp;lt;message success=&quot;false&quot;&amp;gt;
+&amp;lt;errors&amp;gt;
+    &amp;lt;field&amp;gt;
+        &amp;lt;id&amp;gt;clientCode&amp;lt;/id&amp;gt;
+        &amp;lt;msg&amp;gt;&amp;lt;![CDATA[Code not found. &amp;lt;br /&amp;gt;&amp;lt;i&amp;gt;This is a test validation message from the server &amp;lt;/i&amp;gt;]]&amp;gt;&amp;lt;/msg&amp;gt;
+    &amp;lt;/field&amp;gt;
+    &amp;lt;field&amp;gt;
+        &amp;lt;id&amp;gt;portOfLoading&amp;lt;/id&amp;gt;
+        &amp;lt;msg&amp;gt;&amp;lt;![CDATA[Port not found. &amp;lt;br /&amp;gt;&amp;lt;i&amp;gt;This is a test validation message from the server &amp;lt;/i&amp;gt;]]&amp;gt;&amp;lt;/msg&amp;gt;
+    &amp;lt;/field&amp;gt;
+&amp;lt;/errors&amp;gt;
+&amp;lt;/message&amp;gt;
+&lt;/code&gt;&lt;/pre&gt;
+ * &lt;p&gt;Other elements may be placed into the response XML for processing by the {@link Ext.form.Basic}'s callback
+ * or event handler methods. The XML document is available in the {@link #errorReader}'s {@link Ext.data.reader.Xml#xmlData xmlData} property.&lt;/p&gt;
+ */
+Ext.define('Ext.form.action.Submit', {
+    extend:'Ext.form.action.Action',
+    alternateClassName: 'Ext.form.Action.Submit',
+    alias: 'formaction.submit',
+
+    type: 'submit',
+
+<span id='Ext-form.action.Submit-cfg-clientValidation'>    /**
+</span>     * @cfg {boolean} clientValidation Determines whether a Form's fields are validated
+     * in a final call to {@link Ext.form.Basic#isValid isValid} prior to submission.
+     * Pass &lt;tt&gt;false&lt;/tt&gt; in the Form's submit options to prevent this. Defaults to true.
+     */
+
+    // inherit docs
+    run : function(){
+        var form = this.form;
+        if (this.clientValidation === false || form.isValid()) {
+            this.doSubmit();
+        } else {
+            // client validation failed
+            this.failureType = Ext.form.action.Action.CLIENT_INVALID;
+            form.afterAction(this, false);
+        }
+    },
+
+<span id='Ext-form.action.Submit-method-doSubmit'>    /**
+</span>     * @private
+     * Perform the submit of the form data.
+     */
+    doSubmit: function() {
+        var formEl,
+            ajaxOptions = Ext.apply(this.createCallback(), {
+                url: this.getUrl(),
+                method: this.getMethod(),
+                headers: this.headers
+            });
+
+        // For uploads we need to create an actual form that contains the file upload fields,
+        // and pass that to the ajax call so it can do its iframe-based submit method.
+        if (this.form.hasUpload()) {
+            formEl = ajaxOptions.form = this.buildForm();
+            ajaxOptions.isUpload = true;
+        } else {
+            ajaxOptions.params = this.getParams();
+        }
+
+        Ext.Ajax.request(ajaxOptions);
+
+        if (formEl) {
+            Ext.removeNode(formEl);
+        }
+    },
+
+<span id='Ext-form.action.Submit-method-getParams'>    /**
+</span>     * @private
+     * Build the full set of parameters from the field values plus any additional configured params.
+     */
+    getParams: function() {
+        var nope = false,
+            configParams = this.callParent(),
+            fieldParams = this.form.getValues(nope, nope, this.submitEmptyText !== nope);
+        return Ext.apply({}, fieldParams, configParams);
+    },
+
+<span id='Ext-form.action.Submit-method-buildForm'>    /**
+</span>     * @private
+     * Build a form element containing fields corresponding to all the parameters to be
+     * submitted (everything returned by {@link #getParams}.
+     * NOTE: the form element is automatically added to the DOM, so any code that uses
+     * it must remove it from the DOM after finishing with it.
+     * @return HTMLFormElement
+     */
+    buildForm: function() {
+        var fieldsSpec = [],
+            formSpec,
+            formEl,
+            basicForm = this.form,
+            params = this.getParams(),
+            uploadFields = [];
+
+        basicForm.getFields().each(function(field) {
+            if (field.isFileUpload()) {
+                uploadFields.push(field);
+            }
+        });
+
+        function addField(name, val) {
+            fieldsSpec.push({
+                tag: 'input',
+                type: 'hidden',
+                name: name,
+                value: val
+            });
+        }
+
+        // Add the form field values
+        Ext.iterate(params, function(key, val) {
+            if (Ext.isArray(val)) {
+                Ext.each(val, function(v) {
+                    addField(key, v);
+                });
+            } else {
+                addField(key, val);
+            }
+        });
+
+        formSpec = {
+            tag: 'form',
+            action: this.getUrl(),
+            method: this.getMethod(),
+            target: this.target || '_self',
+            style: 'display:none',
+            cn: fieldsSpec
+        };
+
+        // Set the proper encoding for file uploads
+        if (uploadFields.length) {
+            formSpec.encoding = formSpec.enctype = 'multipart/form-data';
+        }
+
+        // Create the form
+        formEl = Ext.core.DomHelper.append(Ext.getBody(), formSpec);
+
+        // Special handling for file upload fields: since browser security measures prevent setting
+        // their values programatically, and prevent carrying their selected values over when cloning,
+        // we have to move the actual field instances out of their components and into the form.
+        Ext.Array.each(uploadFields, function(field) {
+            if (field.rendered) { // can only have a selected file value after being rendered
+                formEl.appendChild(field.extractFileInput());
+            }
+        });
+
+        return formEl;
+    },
+
+
+
+<span id='Ext-form.action.Submit-method-onSuccess'>    /**
+</span>     * @private
+     */
+    onSuccess: function(response) {
+        var form = this.form,
+            success = true,
+            result = this.processResponse(response);
+        if (result !== true &amp;&amp; !result.success) {
+            if (result.errors) {
+                form.markInvalid(result.errors);
+            }
+            this.failureType = Ext.form.action.Action.SERVER_INVALID;
+            success = false;
+        }
+        form.afterAction(this, success);
+    },
+
+<span id='Ext-form.action.Submit-method-handleResponse'>    /**
+</span>     * @private
+     */
+    handleResponse: function(response) {
+        var form = this.form,
+            errorReader = form.errorReader,
+            rs, errors, i, len, records;
+        if (errorReader) {
+            rs = errorReader.read(response);
+            records = rs.records;
+            errors = [];
+            if (records) {
+                for(i = 0, len = records.length; i &lt; len; i++) {
+                    errors[i] = records[i].data;
+                }
+            }
+            if (errors.length &lt; 1) {
+                errors = null;
+            }
+            return {
+                success : rs.success,
+                errors : errors
+            };
+        }
+        return Ext.decode(response.responseText);
+    }
+});
+</pre></pre></body></html>
\ No newline at end of file