/** + + + +The source code + + + + +/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.form.BasicForm * @extends Ext.util.Observable *+ \ No newline at end of fileEncapsulates the DOM <form> element at the heart of the {@link Ext.form.FormPanel FormPanel} class, and provides @@ -35,50 +42,51 @@ * @param {Mixed} el The form element or its id * @param {Object} config Configuration options */ -Ext.form.BasicForm = function(el, config){ - Ext.apply(this, config); - if(Ext.isString(this.paramOrder)){ - this.paramOrder = this.paramOrder.split(/[\s,|]/); - } - /* - * @property items - * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form. - * @type MixedCollection - */ - this.items = new Ext.util.MixedCollection(false, function(o){ - return o.itemId || 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' - ); +Ext.form.BasicForm = Ext.extend(Ext.util.Observable, { - if(el){ - this.initEl(el); - } - Ext.form.BasicForm.superclass.constructor.call(this); -}; + 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); + }, -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. @@ -185,6 +193,11 @@ paramOrder: 'param1|param2|param' */ 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, @@ -196,23 +209,21 @@ paramOrder: 'param1|param2|param' 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 options to {@link #submit} are ignored because Ext's - * Ajax infrastracture is bypassed. To pass extra parameters (baseParams and params), you will need to - * create hidden fields within the form.
- *The url config option is also bypassed, so set the action as well:
- *- * An example encapsulating the above: + * @cfg {Boolean} standardSubmit + *-PANEL.getForm().getEl().dom.action = 'URL' - *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:- +Ext.BasicForm = Ext.form.BasicForm; +new Ext.FormPanel({ standardSubmit: true, baseParams: { foo: 'bar' }, - url: 'myProcess.php', + {@link url}: 'myProcess.php', items: [{ xtype: 'textfield', name: 'userName' @@ -220,21 +231,25 @@ new Ext.FormPanel({ buttons: [{ text: 'Save', handler: function(){ - var O = this.ownerCt; - if (O.getForm().isValid()) { - if (O.url) - O.getForm().getEl().dom.action = O.url; - if (O.baseParams) { - for (i in O.baseParams) { - O.add({ + 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: O.baseParams[i] - }) + value: fp.baseParams[i] + }); } - O.doLayout(); + fp.doLayout(); + // set a custom flag to prevent re-adding + fp.paramsAdded = true; } - O.getForm().submit(); + form.{@link #submit}(); } } }] @@ -271,15 +286,20 @@ new Ext.FormPanel({ e.stopEvent(); }, - // private - destroy: function() { - this.items.each(function(f){ - Ext.destroy(f); - }); - if(this.el){ - this.el.removeAllListeners(); - this.el.remove(); + /** + * 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(); }, @@ -428,10 +448,15 @@ myFormPanel.getForm().submit({ * @return {BasicForm} this */ submit : function(options){ + options = options || {}; if(this.standardSubmit){ - var v = this.isValid(); + var v = options.clientValidation === false || this.isValid(); if(v){ - this.el.dom.submit(); + var el = this.el.dom; + if(this.url && Ext.isEmpty(el.action)){ + el.action = this.url; + } + el.submit(); } return v; } @@ -483,6 +508,12 @@ myFormPanel.getForm().submit({ // private beforeAction : function(action){ + // Call HtmlEditor's syncValue before actions + this.items.each(function(f){ + if(f.isFormField && f.syncValue){ + f.syncValue(); + } + }); var o = action.options; if(o.waitMsg){ if(this.waitMsgTarget === true){ @@ -491,7 +522,7 @@ myFormPanel.getForm().submit({ this.waitMsgTarget = Ext.get(this.waitMsgTarget); this.waitMsgTarget.mask(o.waitMsg, 'x-mask-loading'); }else{ - Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle || 'Please Wait...'); + Ext.MessageBox.wait(o.waitMsg, o.waitTitle || this.waitTitle); } } }, @@ -528,15 +559,23 @@ myFormPanel.getForm().submit({ * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}). * @return Field */ - findField : function(id){ + findField : function(id) { var field = this.items.get(id); - if(!Ext.isObject(field)){ - this.items.each(function(f){ - if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){ - field = f; - return false; + + if (!Ext.isObject(field)) { + //searches for the field corresponding to the given id. Used recursively for composite fields + var findMatchingField = function(f) { + if (f.isFormField) { + if (f.dataIndex == id || f.id == id || f.getName() == id) { + field = f; + return false; + } else if (f.isComposite && f.rendered) { + return f.items.each(findMatchingField); + } } - }); + }; + + this.items.each(findMatchingField); } return field || null; }, @@ -548,7 +587,7 @@ myFormPanel.getForm().submit({ * @return {BasicForm} this */ markInvalid : function(errors){ - if(Ext.isArray(errors)){ + if (Ext.isArray(errors)) { for(var i = 0, len = errors.length; i < len; i++){ var fieldError = errors[i]; var f = this.findField(fieldError.id); @@ -556,7 +595,7 @@ myFormPanel.getForm().submit({ f.markInvalid(fieldError.msg); } } - }else{ + } else { var field, id; for(id in errors){ if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){ @@ -564,6 +603,7 @@ myFormPanel.getForm().submit({ } } } + return this; }, @@ -624,10 +664,33 @@ myFormPanel.getForm().submit({ return Ext.urlDecode(fs); }, - getFieldValues : function(){ - var o = {}; - this.items.each(function(f){ - o[f.getName()] = f.getValue(); + /** + * 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 (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; }, @@ -672,7 +735,6 @@ myFormPanel.getForm().submit({ return this; }, - /** * Removes a field from the items collection (does NOT remove its markup). * @param {Field} field @@ -683,6 +745,13 @@ myFormPanel.getForm().submit({ 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. @@ -733,6 +802,7 @@ myFormPanel.getForm().submit({ }); // back compat -Ext.BasicForm = Ext.form.BasicForm;