/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -/** - * @class Ext.form.BasicForm - * @extends Ext.util.Observable - *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.
- *File Uploads
- *{@link #fileUpload File uploads} are not performed using Ajax submission, 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.
- * @constructor - * @param {Mixed} el The form element or its id - * @param {Object} config Configuration options - */ -Ext.form.BasicForm = Ext.extend(Ext.util.Observable, { - - constructor: function(el, config){ - Ext.apply(this, config); - if(Ext.isString(this.paramOrder)){ - this.paramOrder = this.paramOrder.split(/[\s,|]/); - } - /** - * A {@link Ext.util.MixedCollection MixedCollection} containing all the Ext.form.Fields in this form. - * @type MixedCollection - * @property items - */ - this.items = new Ext.util.MixedCollection(false, function(o){ - return o.getItemId(); - }); - 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); - }, - - /** - * @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. For additional information on using an XMLReader - * see the example provided in examples/form/xml-form.html. - */ - /** - * @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 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:
- */ - /** - * @cfg {String} url - * The URL to use for form actions if one isn't supplied in the - *-{ - records: recordArray -} -{@link #doAction doAction} options. - */ - /** - * @cfg {Boolean} fileUpload - * Set to true if this form is a file upload. - *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'}.
- *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
- */ - /** - * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds). - */ - timeout: 30, - - /** - * @cfg {Object} api (Optional) If specified load and submit actions will be handled - * with {@link Ext.form.Action.DirectLoad} and {@link Ext.form.Action.DirectSubmit}. - * Methods which have been imported by Ext.Direct can be specified here to load and submit - * forms. - * Such as the following:- *-api: { - load: App.ss.MyProfile.load, - submit: App.ss.MyProfile.submit -} -Load actions can use
- */ - - /** - * @cfg {Array/String} paramOrder{@link #paramOrder}or{@link #paramsAsHash}- * to customize how the load method is invoked. - * Submit actions will always use a standard form submit. The formHandler configuration must - * be set on the associated server-side method which has been imported by Ext.DirectA list of params to be executed server side. - * Defaults to undefined. Only used for the
- *{@link #api}- *loadconfiguration.Specify the params in the order in which they must be executed on the - * server-side as either (1) an Array of String values, or (2) a String of params - * delimited by either whitespace, comma, or pipe. For example, - * any of the following would be acceptable:
- */ - paramOrder: undefined, - - /** - * @cfg {Boolean} paramsAsHash Only used for the-paramOrder: ['param1','param2','param3'] -paramOrder: 'param1 param2 param3' -paramOrder: 'param1,param2,param3' -paramOrder: 'param1|param2|param' -{@link #api}- *loadconfiguration. Send parameters as a collection of named - * arguments (defaults to false). Providing a - * {@link #paramOrder} nullifies this configuration. - */ - paramsAsHash: false, - - /** - * @cfg {String} waitTitle - * The default title to show for the waiting message box (defaults to 'Please Wait...') - */ - waitTitle: 'Please Wait...', - - // private - activeAction : null, - - /** - * @cfg {Boolean} trackResetOnLoad If set to true, {@link #reset}() resets to the last loaded - * or {@link #setValues}() data instead of when the form was first created. Defaults to false. - */ - 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, the - *optionsto{@link #submit}are ignored because - * Ext's Ajax infrastracture is bypassed. To pass extra parameters (e.g. - *baseParamsandparams), utilize hidden fields - * to submit extra data, for example:- */ - /** - * 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(); - }, - - /** - * Destroys this object. - * @private - * @param {Boolean} bound true if the object is bound to a form panel. If this is the case - * the FormPanel will take care of destroying certain things, so we're just doubling up. - */ - destroy: function(bound){ - if(bound !== true){ - this.items.each(function(f){ - Ext.destroy(f); - }); - Ext.destroy(this.el); - } - this.items.clear(); - 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; - }, - - /** - *-new Ext.FormPanel({ - standardSubmit: true, - baseParams: { - foo: 'bar' - }, - {@link url}: 'myProcess.php', - items: [{ - xtype: 'textfield', - name: 'userName' - }], - buttons: [{ - text: 'Save', - handler: function(){ - var fp = this.ownerCt.ownerCt, - form = fp.getForm(); - if (form.isValid()) { - // check if there are baseParams and if - // hiddent items have been added already - if (fp.baseParams && !fp.paramsAdded) { - // add hidden items for all baseParams - for (i in fp.baseParams) { - fp.add({ - xtype: 'hidden', - name: i, - value: fp.baseParams[i] - }); - } - fp.doLayout(); - // set a custom flag to prevent re-adding - fp.paramsAdded = true; - } - form.{@link #submit}(); - } - } - }] -}); - *Returns true if any fields in this form have changed from their original values.
- *Note that if this BasicForm was configured with {@link #trackResetOnLoad} then the - * Fields' original values are updated when the values are loaded by {@link #setValues} - * or {@link #loadRecord}.
- * @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 - * {@link Ext.form.Action.Submit submit} and {@link Ext.form.Action.Load load} - * actions unless otherwise noted (custom actions could also accept - * other config options):
The params to pass - * (defaults to the form's baseParams, or none if not defined)
- *Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode}.
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, // note this is Boolean, not string
- "msg":"Consignment updated"
-}
-
-{
- "success":false, // note this is Boolean, not string
- "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 - * value can potentially be the emptyText of a field.
- * @param {Boolean} asString (optional) Pass true to return the values as a string. (defaults to false, returning an Object) - * @return {String/Object} - */ - getValues : function(asString){ - var fs = Ext.lib.Ajax.serializeForm(this.el.dom); - if(asString === true){ - return fs; - } - return Ext.urlDecode(fs); - }, - - /** - * Retrieves the fields in the form as a set of key/value pairs, using the {@link Ext.form.Field#getValue getValue()} method. - * If multiple fields exist with the same name they are returned as an array. - * @param {Boolean} dirtyOnly (optional) True to return only fields that are dirty. - * @return {Object} The values in the form - */ - getFieldValues : function(dirtyOnly){ - var o = {}, - n, - key, - val; - this.items.each(function(f) { - if (!f.disabled && (dirtyOnly !== true || f.isDirty())) { - n = f.getName(); - key = o[n]; - val = f.getValue(); - - if(Ext.isDefined(key)){ - if(Ext.isArray(key)){ - o[n].push(val); - }else{ - o[n] = [key, val]; - } - }else{ - o[n] = val; - } - } - }); - return o; - }, - - /** - * 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; - }, - - /** - * Removes all fields from the collection that have been destroyed. - */ - cleanDestroyed : function() { - this.items.filterBy(function(o) { return !!o.isDestroyed; }).each(this.remove, 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; - }, - - callFieldMethod : function(fnName, args){ - args = args || []; - this.items.each(function(f){ - if(Ext.isFunction(f[fnName])){ - f[fnName].apply(f, args); - } - }); - return this; - } -}); - -// back compat -Ext.BasicForm = Ext.form.BasicForm; - - - \ No newline at end of file