# Form.js

    /**
     * @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>
     * <p>The BasicForm is configured using the {@link #initialConfig} of the FormPanel - that is the configuration object passed to the constructor.
     * This means that if you subclass FormPanel, and you wish to configure the BasicForm, you will need to insert any configuration options
     * for the BasicForm into the <tt><b>initialConfig</b></tt> property. Applying BasicForm configuration settings to <b><tt>this</tt></b> will
     * not affect the BasicForm's configuration.</p>
     * <p>By default, FormPanel uses 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>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,
     * use the {@link Ext.form.BasicForm#standardSubmit standardSubmit) option:</p><pre><code>
    var myForm = new Ext.form.FormPanel({
        standardSubmit: true,
        items: myFieldset
    });</code></pre>
     * @constructor
     * @param {Object} config Configuration options
     */
    Ext.FormPanel = Ext.extend(Ext.Panel, {
    	/**
    	 * @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
    	 */
    // holder
    /***
         * @cfg {Number} labelWidth The width of labels. This property cascades to child containers and can be overridden
         * on any child container (e.g., a fieldset can specify a different labelWidth for its fields).
         */
    // holder
    /***
         * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
         */
    // holder
    /***
         * @cfg {Array} buttons
         * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this FormPanel.<br>
         * <p>Buttons in the footer of a FormPanel may be configured with the option <tt>formBind: true</tt>. This causes
         * the form's {@link #monitorValid valid state monitor task} to enable/disable those Buttons depending on
         * the form's valid/invalid state.</p>
         */
    // holder
    /***
         * @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 and can be overridden on any child container
         * (e.g., a fieldset can specify a different labelAlign for its fields).
         */
        labelAlign:'left',

        /**
         * @cfg {Boolean} monitorValid If true, the form monitors its valid state <b>client-side</b> and
         * regularly fires the {@link #clientvalidation} event passing that state.<br>
         * <p>When monitoring valid state, the FormPanel enables/disables any of its configured
         * {@link #button}s which have been configured with <tt>formBind: true</tt> depending
         * on whether the form is valid or not.</p>
         */
        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();

            this.bodyCfg = {
                tag: 'form',
                cls: this.baseCls + '-body',
                method : this.method || 'POST',
                id : this.formId || Ext.id()
            };
            if(this.fileUpload) {
                this.bodyCfg.enctype = 'multipart/form-data';
            }

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

            this.initItems();

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

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

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

        // private
        initFields : function(){
            var f = this.form;
            var formPanel = this;
            var fn = function(c){
                if(c.isFormField){
                    f.add(c);
                }else 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);
                    }
                }
            }
            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);
            this.form.initEl(this.body);
        },

        // private
        beforeDestroy: function(){
            this.stopMonitoring();
            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);
        },

        // private
        initEvents : function(){
            Ext.FormPanel.superclass.initEvents.call(this);
            this.items.on('remove', this.onRemove, this);
    		this.items.on('add', this.onAdd, this);
            if(this.monitorValid){ // initialize after render
                this.startMonitoring();
            }
        },

        // private
    	onAdd : function(ct, c) {
    		if (c.isFormField) {
    			this.form.add(c);
    		}
    	},

    	// private
    	onRemove : function(c) {
    		if (c.isFormField) {
    			Ext.destroy(c.container.up('.x-form-item'));
    			this.form.remove(c);
    		}
    	},

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

        /**
         * Stops monitoring of the valid state of this form
         */
        stopMonitoring : function(){
            if(this.validTask){
                this.validTask.stopAll();
                this.validTask = null;
            }
        },

        /**
         * 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(){
            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;

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.