X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Submit.html diff --git a/docs/source/Submit.html b/docs/source/Submit.html new file mode 100644 index 00000000..9f368c07 --- /dev/null +++ b/docs/source/Submit.html @@ -0,0 +1,238 @@ +
\ No newline at end of file/** + * @class Ext.form.action.Submit + * @extends Ext.form.action.Action + * <p>A class which handles submission of data from {@link Ext.form.Basic Form}s + * and processes the returned response.</p> + * <p>Instances of this class are only created by a {@link Ext.form.Basic Form} when + * {@link Ext.form.Basic#submit submit}ting.</p> + * <p><u><b>Response Packet Criteria</b></u></p> + * <p>A response packet may contain: + * <div class="mdetail-params"><ul> + * <li><b><code>success</code></b> property : Boolean + * <div class="sub-desc">The <code>success</code> property is required.</div></li> + * <li><b><code>errors</code></b> property : Object + * <div class="sub-desc"><div class="sub-desc">The <code>errors</code> property, + * which is optional, contains error messages for invalid fields.</div></li> + * </ul></div> + * <p><u><b>JSON Packets</b></u></p> + * <p>By default, response packets are assumed to be JSON, so a typical response + * packet may look like this:</p><pre><code> +{ + success: false, + errors: { + clientCode: "Client not found", + portOfLoading: "This field must not be null" + } +}</code></pre> + * <p>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.</p> + * <p>Alternatively, if an {@link #errorReader} is specified as an {@link Ext.data.reader.Xml XmlReader}:</p><pre><code> + errorReader: new Ext.data.reader.Xml({ + record : 'field', + success: '@success' + }, [ + 'id', 'msg' + ] + ) +</code></pre> + * <p>then the results may be sent back in XML format:</p><pre><code> +<?xml version="1.0" encoding="UTF-8"?> +<message success="false"> +<errors> + <field> + <id>clientCode</id> + <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg> + </field> + <field> + <id>portOfLoading</id> + <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg> + </field> +</errors> +</message> +</code></pre> + * <p>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.</p> + */ +Ext.define('Ext.form.action.Submit', { + extend:'Ext.form.action.Action', + alternateClassName: 'Ext.form.Action.Submit', + alias: 'formaction.submit', + + type: 'submit', + + /** + * @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 <tt>false</tt> 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); + } + }, + + /** + * @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); + } + }, + + /** + * @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); + }, + + /** + * @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; + }, + + + + /** + * @private + */ + onSuccess: function(response) { + var form = this.form, + success = true, + result = this.processResponse(response); + if (result !== true && !result.success) { + if (result.errors) { + form.markInvalid(result.errors); + } + this.failureType = Ext.form.action.Action.SERVER_INVALID; + success = false; + } + form.afterAction(this, success); + }, + + /** + * @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 < len; i++) { + errors[i] = records[i].data; + } + } + if (errors.length < 1) { + errors = null; + } + return { + success : rs.success, + errors : errors + }; + } + return Ext.decode(response.responseText); + } +}); +