wp/nwyj/.svn/pristine/d8/d8eaf6c67f683b6cf3b72a372f79f38fa448b8ab.svn-base

/*
 * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/**
 * @class Ext.form.FormPanel
 * @extends Ext.Panel Standard form container.
 *          <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>
 *          <br>
 *          <br>
 *          FormPanel uses a {@link Ext.layout.FormLayout} internally, and that
 *          is required for fields and labels to work correctly within the
 *          FormPanel's layout. To nest additional layout styles within a
 *          FormPanel, you should nest additional Panels or other containers
 *          that can provide additional layout functionality. <b>You should not
 *          override FormPanel's layout.</b> <br>
 *          <br>
 *          By default, Ext Forms are submitted through Ajax, using
 *          {@link Ext.form.Action}. To enable normal browser submission of the
 *          Ext Form contained in this FormPanel, override the Form's onSubmit,
 *          and submit methods:<br>
 *          <br>
 * 
 * <pre><code>
 * var myForm = new Ext.form.FormPanel({
 * 			onSubmit : Ext.emptyFn,
 * 			submit : function() {
 * 				this.getForm().getEl().dom.submit();
 * 			}
 * 		});
 * </code></pre>
 * 
 * <br>
 * @constructor
 * @param {Object}
 *            config Configuration options
 */
Ext.FormPanel = Ext.extend(Ext.Panel, {
			/**
			 * @cfg {Number} labelWidth The width of labels. This property
			 *      cascades to child containers.
			 */
			/**
			 * @cfg {String} itemCls A css class to apply to the x-form-item of
			 *      fields. This property cascades to child containers.
			 */
			/**
			 * @cfg {String} buttonAlign Valid values are "left," "center" and
			 *      "right" (defaults to "center")
			 */
			buttonAlign : 'center',

			/**
			 * @cfg {Number} minButtonWidth Minimum width of all buttons in
			 *      pixels (defaults to 75)
			 */
			minButtonWidth : 75,

			/**
			 * @cfg {String} labelAlign Valid values are "left," "top" and
			 *      "right" (defaults to "left"). This property cascades to
			 *      child containers if not set.
			 */
			labelAlign : 'left',

			/**
			 * @cfg {Boolean} monitorValid If true the form monitors its valid
			 *      state <b>client-side</b> and fires a looping event with
			 *      that state. This is required to bind buttons to the valid
			 *      state using the config value formBind:true on the button.
			 */
			monitorValid : false,

			/**
			 * @cfg {Number} monitorPoll The milliseconds to poll valid state,
			 *      ignored if monitorValid is not true (defaults to 200)
			 */
			monitorPoll : 200,

			/**
			 * @cfg {String} layout
			 * @hide
			 */
			layout : 'form',

			// private
			initComponent : function() {
				this.form = this.createForm();

				Ext.FormPanel.superclass.initComponent.call(this);

				this.addEvents(
						/**
						 * @event clientvalidation If the monitorValid config
						 *        option is true, this event fires repetitively
						 *        to notify of valid state
						 * @param {Form}
						 *            this
						 * @param {Boolean}
						 *            valid true if the form has passed
						 *            client-side validation
						 */
						'clientvalidation');

				this.relayEvents(this.form, ['beforeaction', 'actionfailed',
								'actioncomplete']);
			},

			// private
			createForm : function() {
				delete this.initialConfig.listeners;
				return new Ext.form.BasicForm(null, this.initialConfig);
			},

			// private
			initFields : function() {
				var f = this.form;
				var formPanel = this;
				var fn = function(c) {
					if (c.doLayout && c != formPanel) {
						Ext.applyIf(c, {
									labelAlign : c.ownerCt.labelAlign,
									labelWidth : c.ownerCt.labelWidth,
									itemCls : c.ownerCt.itemCls
								});
						if (c.items) {
							c.items.each(fn);
						}
					} else if (c.isFormField) {
						f.add(c);
					}
				}
				this.items.each(fn);
			},

			// private
			getLayoutTarget : function() {
				return this.form.el;
			},

			/**
			 * Provides access to the {@link Ext.form.BasicForm Form} which this
			 * Panel contains.
			 * 
			 * @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form}
			 *         which this Panel contains.
			 */
			getForm : function() {
				return this.form;
			},

			// private
			onRender : function(ct, position) {
				this.initFields();

				Ext.FormPanel.superclass.onRender.call(this, ct, position);
				var o = {
					tag : 'form',
					method : this.method || 'POST',
					id : this.formId || Ext.id()
				};
				if (this.fileUpload) {
					o.enctype = 'multipart/form-data';
				}
				this.form.initEl(this.body.createChild(o));
			},

			// private
			beforeDestroy : function() {
				Ext.FormPanel.superclass.beforeDestroy.call(this);
				Ext.destroy(this.form);
			},

			// private
			initEvents : function() {
				Ext.FormPanel.superclass.initEvents.call(this);

				if (this.monitorValid) { // initialize after render
					this.startMonitoring();
				}
			},

			/**
			 * Starts monitoring of the valid state of this form. Usually this
			 * is done by passing the config option "monitorValid"
			 */
			startMonitoring : function() {
				if (!this.bound) {
					this.bound = true;
					Ext.TaskMgr.start({
								run : this.bindHandler,
								interval : this.monitorPoll || 200,
								scope : this
							});
				}
			},

			/**
			 * Stops monitoring of the valid state of this form
			 */
			stopMonitoring : function() {
				this.bound = false;
			},

			/**
			 * This is a proxy for the underlying BasicForm's
			 * {@link Ext.form.BasicForm#load} call.
			 * 
			 * @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);
			},

			// private
			onDisable : function() {
				Ext.FormPanel.superclass.onDisable.call(this);
				if (this.form) {
					this.form.items.each(function() {
								this.disable();
							});
				}
			},

			// private
			onEnable : function() {
				Ext.FormPanel.superclass.onEnable.call(this);
				if (this.form) {
					this.form.items.each(function() {
								this.enable();
							});
				}
			},

			// private
			bindHandler : function() {
				if (!this.bound) {
					return false; // stops binding
				}
				var valid = true;
				this.form.items.each(function(f) {
							if (!f.isValid(true)) {
								valid = false;
								return false;
							}
						});
				if (this.buttons) {
					for (var i = 0, len = this.buttons.length; i < len; i++) {
						var btn = this.buttons[i];
						if (btn.formBind === true && btn.disabled === valid) {
							btn.setDisabled(!valid);
						}
					}
				}
				this.fireEvent('clientvalidation', this, valid);
			}
		});
Ext.reg('form', Ext.FormPanel);

Ext.form.FormPanel = Ext.FormPanel;