/** + + + +The source code + + + + +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +/** * @class Ext.form.FormPanel * @extends Ext.Panel *Standard form container.
- * + * *Layout
*By default, FormPanel is configured with layout:'form' to use an {@link Ext.layout.FormLayout} * layout manager, which styles and renders fields and labels correctly. When nesting additional Containers * within a FormPanel, you should ensure that any descendant Containers which host input Fields use the * {@link Ext.layout.FormLayout} layout manager.
- * + * *BasicForm
*Although not listed as configuration options of FormPanel, the FormPanel class accepts all * of the config options required to configure its internal {@link Ext.form.BasicForm} for: @@ -23,11 +30,11 @@ *
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to * the initialConfig property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm} * configuration settings to this will not affect the BasicForm's configuration.
- * + * *Form Validation
*For information on form validation see the following:
*Form Submission
*By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}. To enable normal browser * submission of the {@link Ext.form.BasicForm BasicForm} contained in this FormPanel, see the * {@link Ext.form.BasicForm#standardSubmit standardSubmit} option.
- * + * * @constructor * @param {Object} config Configuration options * @xtype form */ Ext.FormPanel = Ext.extend(Ext.Panel, { - /** - * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id). - */ + /** + * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id). + */ /** * @cfg {Boolean} hideLabels *true to hide field labels by default (sets display:none). Defaults to @@ -111,7 +118,7 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { monitorPoll : 200,
/** - * @cfg {String} layout Defaults to 'form'. Normally this configuration property should not be altered. + * @cfg {String} layout Defaults to 'form'. Normally this configuration property should not be altered. * For additional details see {@link Ext.layout.FormLayout} and {@link Ext.Container#layout Ext.Container.layout}. */ layout : 'form', @@ -131,7 +138,7 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { this.bodyCfg.enctype = 'multipart/form-data'; } this.initItems(); - + this.addEvents( /** * @event clientvalidation @@ -158,19 +165,8 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { var fn = function(c){ if(formPanel.isField(c)){ f.add(c); - }if(c.isFieldWrap){ - Ext.applyIf(c, { - labelAlign: c.ownerCt.labelAlign, - labelWidth: c.ownerCt.labelWidth, - itemCls: c.ownerCt.itemCls - }); - f.add(c.field); - }else if(c.doLayout && c != formPanel){ - Ext.applyIf(c, { - labelAlign: c.ownerCt.labelAlign, - labelWidth: c.ownerCt.labelWidth, - itemCls: c.ownerCt.itemCls - }); + }else if(c.findBy && c != formPanel){ + formPanel.applySettings(c); //each check required for check/radio groups. if(c.items && c.items.each){ c.items.each(fn, this); @@ -180,6 +176,16 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { this.items.each(fn, this); }, + // private + applySettings: function(c){ + var ct = c.ownerCt; + Ext.applyIf(c, { + labelAlign: ct.labelAlign, + labelWidth: ct.labelWidth, + itemCls: ct.itemCls + }); + }, + // private getLayoutTarget : function(){ return this.form.el; @@ -199,21 +205,15 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { Ext.FormPanel.superclass.onRender.call(this, ct, position); this.form.initEl(this.body); }, - + // private beforeDestroy : function(){ this.stopMonitoring(); + this.form.destroy(true); Ext.FormPanel.superclass.beforeDestroy.call(this); - /* - * Clear the items here to prevent them being destroyed again. - * Don't move this behaviour to BasicForm because it can be used - * on it's own. - */ - this.form.items.clear(); - Ext.destroy(this.form); }, - // Determine if a Component is usable as a form Field. + // Determine if a Component is usable as a form Field. isField : function(c) { return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid; }, @@ -221,38 +221,69 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { // private initEvents : function(){ Ext.FormPanel.superclass.initEvents.call(this); - this.on('remove', this.onRemove, this); - this.on('add', this.onAdd, this); + // Listeners are required here to catch bubbling events from children. + this.on({ + scope: this, + add: this.onAddEvent, + remove: this.onRemoveEvent + }); if(this.monitorValid){ // initialize after render this.startMonitoring(); } }, - + // private - onAdd : function(ct, c) { - // If a single form Field, add it - if (this.isField(c)) { + onAdd: function(c){ + Ext.FormPanel.superclass.onAdd.call(this, c); + this.processAdd(c); + }, + + // private + onAddEvent: function(ct, c){ + if(ct !== this){ + this.processAdd(c); + } + }, + + // private + processAdd : function(c){ + // If a single form Field, add it + if(this.isField(c)){ this.form.add(c); - // If a Container, add any Fields it might contain - } else if (c.findBy) { - Ext.applyIf(c, { - labelAlign: c.ownerCt.labelAlign, - labelWidth: c.ownerCt.labelWidth, - itemCls: c.ownerCt.itemCls - }); + // If a Container, add any Fields it might contain + }else if(c.findBy){ + this.applySettings(c); this.form.add.apply(this.form, c.findBy(this.isField)); } }, - + // private - onRemove : function(ct, c) { - // If a single form Field, remove it - if (this.isField(c)) { - Ext.destroy(c.container.up('.x-form-item')); - this.form.remove(c); - // If a Container, remove any Fields it might contain - } else if (c.findByType) { - Ext.each(c.findBy(this.isField), this.form.remove, this.form); + onRemove: function(c){ + Ext.FormPanel.superclass.onRemove.call(this, c); + this.processRemove(c); + }, + + onRemoveEvent: function(ct, c){ + if(ct !== this){ + this.processRemove(c); + } + }, + + // private + processRemove: function(c){ + if(!this.destroying){ + // If a single form Field, remove it + if(this.isField(c)){ + this.form.remove(c); + // If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields. + }else if (c.findBy){ + Ext.each(c.findBy(this.isField), this.form.remove, this.form); + /* + * This isn't the most efficient way of getting rid of the items, however it's the most + * correct, which in this case is most important. + */ + this.form.cleanDestroyed(); + } } }, @@ -286,7 +317,7 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details) */ load : function(){ - this.form.load.apply(this.form, arguments); + this.form.load.apply(this.form, arguments); }, // private @@ -333,7 +364,6 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { Ext.reg('form', Ext.FormPanel); Ext.form.FormPanel = Ext.FormPanel; - - - + + \ No newline at end of file