<div class="body-wrap">        <div class="top-tools">            <a class="inner-link" href="#Ext.form.FormPanel-props"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>            <a class="inner-link" href="#Ext.form.FormPanel-methods"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-method">Methods</a>            <a class="inner-link" href="#Ext.form.FormPanel-events"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-event">Events</a>                            <a class="inner-link" href="#Ext.form.FormPanel-configs"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>                        <a class="bookmark" href="../docs/?class=Ext.form.FormPanel"><img src="ext-2.0/resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>        </div>                <div class="inheritance res-block"><pre class="res-block-inner"><a ext:cls="Ext.util.Observable" ext:member="" href="output/Ext.util.Observable.html">Observable</a>  <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Component" ext:member="" href="output/Ext.Component.html">Component</a>    <img src="resources/elbow-end.gif"/><a ext:cls="Ext.BoxComponent" ext:member="" href="output/Ext.BoxComponent.html">BoxComponent</a>      <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Container" ext:member="" href="output/Ext.Container.html">Container</a>        <img src="resources/elbow-end.gif"/><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a>          <img src="resources/elbow-end.gif"/>FormPanel</pre></div>                <h1>Class Ext.form.FormPanel</h1>        <table cellspacing="0">            <tr><td class="label">Package:</td><td class="hd-info">Ext.form</td></tr>            <tr><td class="label">Defined In:</td><td class="hd-info">Form.js</td></tr>            <tr><td class="label">Class:</td><td class="hd-info">FormPanel</td></tr>                                    <tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Panel" ext:member="" href="output/Ext.Panel.html">Panel</a></td></tr>                    </table>        <div class="description">            Standard form container.<p><b>Although they are not listed, this class also accepts all the config options required to configure its internal <a ext:cls="Ext.form.BasicForm" href="output/Ext.form.BasicForm.html">Ext.form.BasicForm</a></b></p><p>The BasicForm is configured using the <a ext:cls="Ext.form.FormPanel" ext:member="initialConfig" href="output/Ext.form.FormPanel.html#initialConfig">initialConfig</a> 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 optionsfor the BasicForm into the <tt><b>initialConfig</b></tt> property. Applying BasicForm configuration settings to <b><tt>this</tt></b> willnot affect the BasicForm's configuration.</p><br><br>FormPanel uses a <a ext:cls="Ext.layout.FormLayout" href="output/Ext.layout.FormLayout.html">Ext.layout.FormLayout</a> internally, and that is required for fields and labels to work correctlywithin the FormPanel's layout.  To nest additional layout styles within a FormPanel, you should nest additional Panelsor 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 <a ext:cls="Ext.form.Action" href="output/Ext.form.Action.html">Ext.form.Action</a>.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 = <b>new</b> Ext.form.FormPanel({        onSubmit: Ext.emptyFn,        submit: <b>function</b>() {            <b>this</b>.getForm().getEl().dom.submit();        }    });</code></pre><br>        </div>                <div class="hr"></div>                <a id="Ext.form.FormPanel-configs"></a>        <h2>Config Options</h2>        <table cellspacing="0" class="member-table">            <tr>                <th class="sig-header" colspan="2">Config Options</th>                <th class="msource-header">Defined By</th>            </tr>                <tr class="config-row inherited expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-activeItem"></a>            <b>activeItem</b> : String/Number            <div class="mdesc">                        <div class="short">A string component id or the numeric index of the component that should be initially activated within the container's...</div>            <div class="long">                A string component id or the numeric index of the component that should be initially activated within the container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the container's collection). activeItem only applies to layout styles that can display items one at a time (like <a ext:cls="Ext.layout.Accordion" href="output/Ext.layout.Accordion.html">Ext.layout.Accordion</a>, <a ext:cls="Ext.layout.CardLayout" href="output/Ext.layout.CardLayout.html">Ext.layout.CardLayout</a> and <a ext:cls="Ext.layout.FitLayout" href="output/Ext.layout.FitLayout.html">Ext.layout.FitLayout</a>). Related to <a ext:cls="Ext.layout.ContainerLayout" ext:member="activeItem" href="output/Ext.layout.ContainerLayout.html#activeItem">Ext.layout.ContainerLayout.activeItem</a>.            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Container" ext:member="#activeItem" href="output/Ext.Container.html#activeItem">Container</a></td>    </tr>        <tr class="config-row inherited alt">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-allowDomMove"></a>            <b>allowDomMove</b> : Boolean            <div class="mdesc">                            Whether the component can move the Dom node when rendering (defaults to true).                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Component" ext:member="#allowDomMove" href="output/Ext.Component.html#allowDomMove">Component</a></td>    </tr>        <tr class="config-row inherited expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-animCollapse"></a>            <b>animCollapse</b> : Boolean            <div class="mdesc">                        <div class="short">True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....</div>            <div class="long">                True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the <a ext:cls="Ext.Fx" href="output/Ext.Fx.html">Ext.Fx</a> class is available, otherwise false).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#animCollapse" href="output/Ext.Panel.html#animCollapse">Panel</a></td>    </tr>        <tr class="config-row inherited alt expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-applyTo"></a>            <b>applyTo</b> : Mixed            <div class="mdesc">                        <div class="short">The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...</div>            <div class="long">                The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for <a ext:cls="Ext.Component" ext:member="renderTo" href="output/Ext.Component.html#renderTo">renderTo</a> will be ignored and the target element's parent node will automatically be used as the component's container.            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Component" ext:member="#applyTo" href="output/Ext.Component.html#applyTo">Component</a></td>    </tr>        <tr class="config-row inherited expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoDestroy"></a>            <b>autoDestroy</b> : Boolean            <div class="mdesc">                        <div class="short">If true the container will automatically destroy any contained component that is removed from it, else destruction mu...</div>            <div class="long">                If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Container" ext:member="#autoDestroy" href="output/Ext.Container.html#autoDestroy">Container</a></td>    </tr>        <tr class="config-row inherited alt expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoHeight"></a>            <b>autoHeight</b> : Boolean            <div class="mdesc">                        <div class="short">True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not ...</div>            <div class="long">                True to use height:'auto', false to use fixed height. Note: although many components inherit this config option, not all will function as expected with a height of 'auto'. (defaults to false).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoHeight" href="output/Ext.BoxComponent.html#autoHeight">BoxComponent</a></td>    </tr>        <tr class="config-row inherited expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoLoad"></a>            <b>autoLoad</b> : Object/String/Function            <div class="mdesc">                        <div class="short">A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...</div>            <div class="long">                A valid url spec according to the Updater <a ext:cls="Ext.Updater" ext:member="update" href="output/Ext.Updater.html#update">Ext.Updater.update</a> method. If autoLoad is not null, the panel will attempt to load its contents immediately upon render.<p> The URL will become the default URL for this panel's <a ext:cls="Ext.Panel" ext:member="body" href="output/Ext.Panel.html#body">body</a> element, so it may be <a ext:cls="Ext.Element" ext:member="refresh" href="output/Ext.Element.html#refresh">refresh</a>ed at any time.</p>            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#autoLoad" href="output/Ext.Panel.html#autoLoad">Panel</a></td>    </tr>        <tr class="config-row inherited alt expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoScroll"></a>            <b>autoScroll</b> : Boolean            <div class="mdesc">                        <div class="short">True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...</div>            <div class="long">                True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Panel" ext:member="#autoScroll" href="output/Ext.Panel.html#autoScroll">Panel</a></td>    </tr>        <tr class="config-row inherited expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoShow"></a>            <b>autoShow</b> : Boolean            <div class="mdesc">                        <div class="short">True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...</div>            <div class="long">                True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render (defaults to false).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.Component" ext:member="#autoShow" href="output/Ext.Component.html#autoShow">Component</a></td>    </tr>        <tr class="config-row inherited alt expandable">        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>        <td class="sig">        <a id="Ext.form.FormPanel-autoWidth"></a>            <b>autoWidth</b> : Boolean            <div class="mdesc">                        <div class="short">True to use width:'auto', false to use fixed width. Note: although many components inherit this config option, not al...</div>            <div class="long">                True to use width:'auto', false to use fixed width. Note: although many components inherit this config option, not all will function as expected with a width of 'auto'. (defaults to false).            </div>                        </div>        </td>        <td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoWidth" href="output/Ext.BoxComponent.html#autoWidth">BoxComponent</a></td>