2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.form.FormPanel
\r
11 * @extends Ext.Panel
\r
12 * Standard form container.
\r
13 * <p><b>Although they are not listed, this class also accepts all the config options required to configure its internal {@link Ext.form.BasicForm}</b></p>
\r
14 * <p>The BasicForm is configured using the {@link #initialConfig} of the FormPanel - that is the configuration object passed to the constructor.
\r
15 * This means that if you subclass FormPanel, and you wish to configure the BasicForm, you will need to insert any configuration options
\r
16 * for the BasicForm into the <tt><b>initialConfig</b></tt> property. Applying BasicForm configuration settings to <b><tt>this</tt></b> will
\r
17 * not affect the BasicForm's configuration.</p>
\r
18 * <p>By default, FormPanel uses an {@link Ext.layout.FormLayout} layout manager, which styles and renders fields and labels correctly.
\r
19 * When nesting additional Containers within a FormPanel, you should ensure that any descendant Containers which
\r
20 * host input Fields use the {@link Ext.layout.FormLayout} layout manager.</p>
\r
21 * <p>By default, Ext Forms are submitted through Ajax, using {@link Ext.form.Action}.
\r
22 * To enable normal browser submission of the Ext Form contained in this FormPanel,
\r
23 * use the {@link Ext.form.BasicForm#standardSubmit standardSubmit) option:</p><pre><code>
\r
24 var myForm = new Ext.form.FormPanel({
\r
25 standardSubmit: true,
\r
29 * @param {Object} config Configuration options
\r
31 Ext.FormPanel = Ext.extend(Ext.Panel, {
\r
33 * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
\r
36 * @cfg {Number} labelWidth The width of labels. This property cascades to child containers and can be overridden
\r
37 * on any child container (e.g., a fieldset can specify a different labelWidth for its fields).
\r
40 * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
\r
43 * @cfg {Array} buttons
\r
44 * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
\r
45 * <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
\r
46 * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
\r
47 * the form's valid/invalid state.</p>
\r
50 * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
\r
52 buttonAlign:'center',
\r
55 * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
\r
60 * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
\r
61 * This property cascades to child containers and can be overridden on any child container
\r
62 * (e.g., a fieldset can specify a different labelAlign for its fields).
\r
67 * @cfg {Boolean} monitorValid If true, the form monitors its valid state <b>client-side</b> and
\r
68 * regularly fires the {@link #clientvalidation} event passing that state.<br>
\r
69 * <p>When monitoring valid state, the FormPanel enables/disables any of its configured
\r
70 * {@link #button}s which have been configured with <tt>formBind: true<tt> depending
\r
71 * on whether the form is valid or not.</p>
\r
73 monitorValid : false,
\r
76 * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
\r
81 * @cfg {String} layout @hide
\r
86 initComponent :function(){
\r
87 this.form = this.createForm();
\r
91 cls: this.baseCls + '-body',
\r
92 method : this.method || 'POST',
\r
93 id : this.formId || Ext.id()
\r
95 if(this.fileUpload) {
\r
96 this.bodyCfg.enctype = 'multipart/form-data';
\r
99 Ext.FormPanel.superclass.initComponent.call(this);
\r
105 * @event clientvalidation
\r
106 * If the monitorValid config option is true, this event fires repetitively to notify of valid state
\r
107 * @param {Ext.form.FormPanel} this
\r
108 * @param {Boolean} valid true if the form has passed client-side validation
\r
113 this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
\r
117 createForm: function(){
\r
118 delete this.initialConfig.listeners;
\r
119 return new Ext.form.BasicForm(null, this.initialConfig);
\r
123 initFields : function(){
\r
125 var formPanel = this;
\r
126 var fn = function(c){
\r
129 }else if(c.doLayout && c != formPanel){
\r
131 labelAlign: c.ownerCt.labelAlign,
\r
132 labelWidth: c.ownerCt.labelWidth,
\r
133 itemCls: c.ownerCt.itemCls
\r
140 this.items.each(fn);
\r
144 getLayoutTarget : function(){
\r
145 return this.form.el;
\r
149 * Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
\r
150 * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
\r
152 getForm : function(){
\r
157 onRender : function(ct, position){
\r
160 Ext.FormPanel.superclass.onRender.call(this, ct, position);
\r
161 this.form.initEl(this.body);
\r
165 beforeDestroy: function(){
\r
166 Ext.FormPanel.superclass.beforeDestroy.call(this);
\r
167 this.stopMonitoring();
\r
168 Ext.destroy(this.form);
\r
172 initEvents : function(){
\r
173 Ext.FormPanel.superclass.initEvents.call(this);
\r
174 this.items.on('remove', this.onRemove, this);
\r
175 this.items.on('add', this.onAdd, this);
\r
176 if(this.monitorValid){ // initialize after render
\r
177 this.startMonitoring();
\r
182 onAdd : function(ct, c) {
\r
183 if (c.isFormField) {
\r
189 onRemove : function(c) {
\r
190 if (c.isFormField) {
\r
191 Ext.destroy(c.container.up('.x-form-item'));
\r
192 this.form.remove(c);
\r
197 * Starts monitoring of the valid state of this form. Usually this is done by passing the config
\r
198 * option "monitorValid"
\r
200 startMonitoring : function(){
\r
203 Ext.TaskMgr.start({
\r
204 run : this.bindHandler,
\r
205 interval : this.monitorPoll || 200,
\r
212 * Stops monitoring of the valid state of this form
\r
214 stopMonitoring : function(){
\r
215 this.bound = false;
\r
219 * This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
\r
220 * @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
\r
223 this.form.load.apply(this.form, arguments);
\r
227 onDisable : function(){
\r
228 Ext.FormPanel.superclass.onDisable.call(this);
\r
230 this.form.items.each(function(){
\r
237 onEnable : function(){
\r
238 Ext.FormPanel.superclass.onEnable.call(this);
\r
240 this.form.items.each(function(){
\r
247 bindHandler : function(){
\r
249 return false; // stops binding
\r
252 this.form.items.each(function(f){
\r
253 if(!f.isValid(true)){
\r
259 for(var i = 0, len = this.buttons.length; i < len; i++){
\r
260 var btn = this.buttons[i];
\r
261 if(btn.formBind === true && btn.disabled === valid){
\r
262 btn.setDisabled(!valid);
\r
266 this.fireEvent('clientvalidation', this, valid);
\r
269 Ext.reg('form', Ext.FormPanel);
\r
271 Ext.form.FormPanel = Ext.FormPanel;
\r