-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.form.FormPanel"></div>/**
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body onload="prettyPrint();">
+ <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.form.FormPanel"></div>/**
* @class Ext.form.FormPanel
* @extends Ext.Panel
* <p>Standard form container.</p>
- *
+ *
* <p><b><u>Layout</u></b></p>
* <p>By default, FormPanel is configured with <tt>layout:'form'</tt> 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.</p>
- *
+ *
* <p><b><u>BasicForm</u></b></p>
* <p>Although <b>not listed</b> as configuration options of FormPanel, the FormPanel class accepts all
* of the config options required to configure its internal {@link Ext.form.BasicForm} for:
* <li>{@link Ext.form.BasicForm#fileUpload file uploads}</li>
* <li>functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form</li>
* </ul></div>
- *
+ *
* <p><b>Note</b>: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
* the <tt><b>initialConfig</b></tt> property of the FormPanel. Applying {@link Ext.form.BasicForm BasicForm}
* configuration settings to <b><tt>this</tt></b> will <b>not</b> affect the BasicForm's configuration.</p>
- *
+ *
* <p><b><u>Form Validation</u></b></p>
* <p>For information on form validation see the following:</p>
* <div class="mdetail-params"><ul>
* <li>{@link Ext.form.BasicForm#doAction BasicForm.doAction <b>clientValidation</b> notes}</li>
* <li><tt>{@link Ext.form.FormPanel#monitorValid monitorValid}</tt></li>
* </ul></div>
- *
+ *
* <p><b><u>Form Submission</u></b></p>
* <p>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
* <tt><b>{@link Ext.form.BasicForm#standardSubmit standardSubmit}</b></tt> option.</p>
- *
+ *
* @constructor
* @param {Object} config Configuration options
* @xtype form
*/
Ext.FormPanel = Ext.extend(Ext.Panel, {
-
<div id="cfg-Ext.form.FormPanel-formId"></div>/**
- * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
- */
+ <div id="cfg-Ext.form.FormPanel-formId"></div>/**
+ * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
+ */
<div id="cfg-Ext.form.FormPanel-hideLabels"></div>/**
* @cfg {Boolean} hideLabels
* <p><tt>true</tt> to hide field labels by default (sets <tt>display:none</tt>). Defaults to
monitorPoll : 200,
<div id="cfg-Ext.form.FormPanel-layout"></div>/**
- * @cfg {String} layout Defaults to <tt>'form'</tt>. Normally this configuration property should not be altered.
+ * @cfg {String} layout Defaults to <tt>'form'</tt>. 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',
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();
-
+
this.addEvents(
<div id="event-Ext.form.FormPanel-clientvalidation"></div>/**
* @event clientvalidation
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);
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;
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;
},
// 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();
+ }
}
},
* @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
Ext.reg('form', Ext.FormPanel);
Ext.form.FormPanel = Ext.FormPanel;
-
-</pre> \r
-</body>\r
+</pre>
+</body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff