Encapsulates the DOM <form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides - * input field management, validation, submission, and form loading services.
- *By default, Ext Forms are submitted through Ajax, using an instance of {@link Ext.form.Action.Submit}. - * To enable normal browser submission of an Ext Form, use the {@link #standardSubmit} config option.
- *The server response is parsed by the browser to create the document for the IFRAME. If the - * server is using JSON to send the return object, then the - * Content-Type header - * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- *Characters which are significant to an HTML parser must be sent as HTML entities, so encode - * "<" as "<", "&" as "&" etc.
- *The response text is retrieved from the document, and a fake XMLHttpRequest object - * is created containing a responseText property in order to conform to the - * requirements of event handlers and callbacks.
- *Be aware that file upload packets are sent with the content type multipart/form - * and some server technologies (notably JEE) may require some custom processing in order to - * retrieve parameter names and parameter values from the packet content.
- * @constructor - * @param {Mixed} el The form element or its id - * @param {Object} config Configuration options - */ -Ext.form.BasicForm = function(el, config){ - Ext.apply(this, config); - /* - * The Ext.form.Field items in this form. - * @type MixedCollection - */ - this.items = new Ext.util.MixedCollection(false, function(o){ - return o.id || (o.id = Ext.id()); - }); - this.addEvents( - /** - * @event beforeaction - * Fires before any action is performed. Return false to cancel the action. - * @param {Form} this - * @param {Action} action The {@link Ext.form.Action} to be performed - */ - 'beforeaction', - /** - * @event actionfailed - * Fires when an action fails. - * @param {Form} this - * @param {Action} action The {@link Ext.form.Action} that failed - */ - 'actionfailed', - /** - * @event actioncomplete - * Fires when an action is completed. - * @param {Form} this - * @param {Action} action The {@link Ext.form.Action} that completed - */ - 'actioncomplete' - ); - - if(el){ - this.initEl(el); - } - Ext.form.BasicForm.superclass.constructor.call(this); -}; - -Ext.extend(Ext.form.BasicForm, Ext.util.Observable, { - /** - * @cfg {String} method - * The request method to use (GET or POST) for form actions if one isn't supplied in the action options. - */ - /** - * @cfg {DataReader} reader - * An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read data when executing "load" actions. - * This is optional as there is built-in support for processing JSON. - */ - /** - * @cfg {DataReader} errorReader - *An Ext.data.DataReader (e.g. {@link Ext.data.XmlReader}) to be used to read field error messages returned from "submit" actions. - * This is completely optional as there is built-in support for processing JSON.
- *The Records which provide messages for the invalid Fields must use the Field name (or id) as the Record ID, - * and must contain a field called "msg" which contains the error message.
- *The errorReader does not have to be a full-blown implementation of a DataReader. It simply needs to implement a - * read(xhr) function which returns an Array of Records in an object with the following structure:
-{
- records: recordArray
-}
-File uploads are not performed using normal "Ajax" techniques, that is they are not - * performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the - * DOM <form> element temporarily modified to have its - * target set to refer - * to a dynamically generated, hidden <iframe> which is inserted into the document - * but removed after the return data has been gathered.
- *The server response is parsed by the browser to create the document for the IFRAME. If the - * server is using JSON to send the return object, then the - * Content-Type header - * must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.
- *Characters which are significant to an HTML parser must be sent as HTML entities, so encode - * "<" as "<", "&" as "&" etc.
- *The response text is retrieved from the document, and a fake XMLHttpRequest object - * is created containing a responseText property in order to conform to the - * requirements of event handlers and callbacks.
- *Be aware that file upload packets are sent with the content type multipart/form - * and some server technologies (notably JEE) may require some custom processing in order to - * retrieve parameter names and parameter values from the packet content.
- */ - /** - * @cfg {Object} baseParams - * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}. - */ - /** - * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds). - */ - timeout: 30, - - // private - activeAction : null, - - /** - * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded - * or setValues() data instead of when the form was first created. - */ - trackResetOnLoad : false, - - /** - * @cfg {Boolean} standardSubmit If set to true, standard HTML form submits are used instead of XHR (Ajax) style - * form submissions. (defaults to false)Note: When using standardSubmit, any the options to {@link #submit} are - * ignored because Ext's Ajax infrastracture is bypassed. To pass extra parameters, you will need to create - * hidden fields within the form.
- */ - /** - * By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific - * element by passing it or its id or mask the form itself by passing in true. - * @type Mixed - * @property waitMsgTarget - */ - - // private - initEl : function(el){ - this.el = Ext.get(el); - this.id = this.el.id || Ext.id(); - if(!this.standardSubmit){ - this.el.on('submit', this.onSubmit, this); - } - this.el.addClass('x-form'); - }, - - /** - * Get the HTML form Element - * @return Ext.Element - */ - getEl: function(){ - return this.el; - }, - - // private - onSubmit : function(e){ - e.stopEvent(); - }, - - // private - destroy: function() { - this.items.each(function(f){ - Ext.destroy(f); - }); - if(this.el){ - this.el.removeAllListeners(); - this.el.remove(); - } - this.purgeListeners(); - }, - - /** - * Returns true if client-side validation on the form is successful. - * @return Boolean - */ - isValid : function(){ - var valid = true; - this.items.each(function(f){ - if(!f.validate()){ - valid = false; - } - }); - return valid; - }, - - /** - * Returns true if any fields in this form have changed since their original load. - * @return Boolean - */ - isDirty : function(){ - var dirty = false; - this.items.each(function(f){ - if(f.isDirty()){ - dirty = true; - return false; - } - }); - return dirty; - }, - - /** - * Performs a predefined action ({@link Ext.form.Action.Submit} or - * {@link Ext.form.Action.Load}) or a custom extension of {@link Ext.form.Action} - * to perform application-specific processing. - * @param {String/Object} actionName The name of the predefined action type, - * or instance of {@link Ext.form.Action} to perform. - * @param {Object} options (optional) The options to pass to the {@link Ext.form.Action}. - * All of the config options listed below are supported by both the submit - * and load actions unless otherwise noted (custom actions could also accept - * other config options):The url for the action (defaults - * to the form's url.)
The form method to use (defaults - * to the form's method, or POST if not defined)
The params to pass - * (defaults to the form's baseParams, or none if not defined)
Request headers to set for the action - * (defaults to the form's default headers)
The callback that will - * be invoked after a successful response. The function is passed the following parameters:
form : Ext.form.BasicFormaction : Ext.form.ActionThe callback that will - * be invoked after a failed transaction attempt. The function - * is passed the following parameters:
form : Ext.form.BasicFormaction : Ext.form.ActionThe scope in which to call the - * callback functions (The this reference for the callback functions).
Submit Action only. - * Determines whether a Form's fields are validated in a final call to - * {@link Ext.form.BasicForm#isValid isValid} prior to submission. Set to false - * to prevent this. If undefined, pre-submission field validation is performed.
Note: this is ignored when using the {@link #standardSubmit} option.
- *The following code:
-myFormPanel.getForm().submit({
- clientValidation: true,
- url: 'updateConsignment.php',
- params: {
- newStatus: 'delivered'
- },
- success: function(form, action) {
- Ext.Msg.alert("Success", action.result.msg);
- },
- failure: function(form, action) {
- switch (action.failureType) {
- case Ext.form.Action.CLIENT_INVALID:
- Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
- break;
- case Ext.form.Action.CONNECT_FAILURE:
- Ext.Msg.alert("Failure", "Ajax communication failed");
- break;
- case Ext.form.Action.SERVER_INVALID:
- Ext.Msg.alert("Failure", action.result.msg);
- }
- }
-});
-
-{
- success: true,
- msg: 'Consignment updated'
-}
-
-{
- success: false,
- msg: 'You do not have permission to perform this operation'
-}
-
-[{id:'clientName', value:'Fred. Olsen Lines'},
- {id:'portOfLoading', value:'FXT'},
- {id:'portOfDischarge', value:'OSL'} ]
-{
- clientName: 'Fred. Olsen Lines',
- portOfLoading: 'FXT',
- portOfDischarge: 'OSL'
-}Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit. - * If multiple fields exist with the same name they are returned as an array.
- * - *Note: The values are collected from all enabled HTML input elements within the form, not from - * the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the the - * value can potentionally be the emptyText of a field.
- * @param {Boolean} asString (optional) false to return the values as an object (defaults to returning as a string) - * @return {String/Object} - */ - getValues : function(asString){ - var fs = Ext.lib.Ajax.serializeForm(this.el.dom); - if(asString === true){ - return fs; - } - return Ext.urlDecode(fs); - }, - - /** - * Clears all invalid messages in this form. - * @return {BasicForm} this - */ - clearInvalid : function(){ - this.items.each(function(f){ - f.clearInvalid(); - }); - return this; - }, - - /** - * Resets this form. - * @return {BasicForm} this - */ - reset : function(){ - this.items.each(function(f){ - f.reset(); - }); - return this; - }, - - /** - * Add Ext.form Components to this form's Collection. This does not result in rendering of - * the passed Component, it just enables the form to validate Fields, and distribute values to - * Fields. - *You will not usually call this function. In order to be rendered, a Field must be added - * to a {@link Ext.Container Container}, usually an {@link Ext.form.FormPanel FormPanel}. - * The FormPanel to which the field is added takes care of adding the Field to the BasicForm's - * collection.
- * @param {Field} field1 - * @param {Field} field2 (optional) - * @param {Field} etc (optional) - * @return {BasicForm} this - */ - add : function(){ - this.items.addAll(Array.prototype.slice.call(arguments, 0)); - return this; - }, - - - /** - * Removes a field from the items collection (does NOT remove its markup). - * @param {Field} field - * @return {BasicForm} this - */ - remove : function(field){ - this.items.remove(field); - return this; - }, - - /** - * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm, - * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id. - * @return {BasicForm} this - */ - render : function(){ - this.items.each(function(f){ - if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists - f.applyToMarkup(f.id); - } - }); - return this; - }, - - /** - * Calls {@link Ext#apply} for all fields in this form with the passed object. - * @param {Object} values - * @return {BasicForm} this - */ - applyToFields : function(o){ - this.items.each(function(f){ - Ext.apply(f, o); - }); - return this; - }, - - /** - * Calls {@link Ext#applyIf} for all field in this form with the passed object. - * @param {Object} values - * @return {BasicForm} this - */ - applyIfToFields : function(o){ - this.items.each(function(f){ - Ext.applyIf(f, o); - }); - return this; - } -}); - -// back compat -Ext.BasicForm = Ext.form.BasicForm; \ No newline at end of file