- <div class="body-wrap">
- <div class="top-tools">
- <a class="inner-link" href="#Ext.form.FormPanel-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
- <a class="inner-link" href="#Ext.form.FormPanel-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
- <a class="inner-link" href="#Ext.form.FormPanel-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
- <a class="inner-link" href="#Ext.form.FormPanel-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
- <a class="bookmark" href="../docs/?class=Ext.form.FormPanel"><img src="../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"><a href="../src/Form.js" target="_blank">Form.js</a></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 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 <a ext:cls="Ext.layout.FormLayout" href="output/Ext.layout.FormLayout.html">Ext.layout.FormLayout</a> 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 <a ext:cls="Ext.layout.FormLayout" href="output/Ext.layout.FormLayout.html">Ext.layout.FormLayout</a> layout manager.</p>
-<p>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,
-use the <a ext:cls="Ext.form.BasicForm" ext:member="standardSubmit" href="output/Ext.form.BasicForm.html#standardSubmit">standardSubmit) option:</p><pre><code>var myForm = <b>new</b> Ext.form.FormPanel({
- standardSubmit: true,
- items: myFieldset
-</a>);</code></pre> </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">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-activeItem"></a>\r
- <b>activeItem</b> : String/Number <div class="mdesc">\r
- <div class="short">A string component id or the numeric index of the component that should be initially activated within the container's...</div>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Container" ext:member="#activeItem" href="output/Ext.Container.html#activeItem">Container</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-allowDomMove"></a>\r
- <b>allowDomMove</b> : Boolean <div class="mdesc">\r
- Whether the component can move the Dom node when rendering (defaults to true). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#allowDomMove" href="output/Ext.Component.html#allowDomMove">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-animCollapse"></a>\r
- <b>animCollapse</b> : Boolean <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#animCollapse" href="output/Ext.Panel.html#animCollapse">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-applyTo"></a>\r
- <b>applyTo</b> : Mixed <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#applyTo" href="output/Ext.Component.html#applyTo">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoDestroy"></a>\r
- <b>autoDestroy</b> : Boolean <div class="mdesc">\r
- <div class="short">If true the container will automatically destroy any contained component that is removed from it, else destruction mu...</div>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Container" ext:member="#autoDestroy" href="output/Ext.Container.html#autoDestroy">Container</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoEl"></a>\r
- <b>autoEl</b> : String/Object <div class="mdesc">\r
- <div class="short">A tag name or DomHelper spec to create an element with. This is intended to create shorthand utility components inlin...</div>\r
- <div class="long">\r
- A tag name or DomHelper spec to create an element with. This is intended to create shorthand utility components inline via JSON. It should not be used for higher level components which already create their own elements. Example usage: <pre><code>{xtype:<em>'box'</em>, autoEl: <em>'div'</em>, cls:<em>'my-class'</em>}
-{xtype:<em>'box'</em>, autoEl: {tag:<em>'blockquote'</em>, html:<em>'autoEl is cool!'</em>}} // <b>with</b> DomHelper</code></pre> </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#autoEl" href="output/Ext.Component.html#autoEl">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoHeight"></a>\r
- <b>autoHeight</b> : Boolean <div class="mdesc">\r
- <div class="short">True to use height:'auto', false to use fixed height (defaults to false). Note: Although many components inherit this...</div>\r
- <div class="long">\r
- True to use height:'auto', false to use fixed height (defaults to false). <b>Note</b>: Although many components inherit this config option, not all will function as expected with a height of 'auto'. Setting autoHeight:true means that the browser will manage height based on the element's contents, and that Ext will not manage it at all. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoHeight" href="output/Ext.BoxComponent.html#autoHeight">BoxComponent</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoLoad"></a>\r
- <b>autoLoad</b> : Object/String/Function <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#autoLoad" href="output/Ext.Panel.html#autoLoad">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoScroll"></a>\r
- <b>autoScroll</b> : Boolean <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#autoScroll" href="output/Ext.Panel.html#autoScroll">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoShow"></a>\r
- <b>autoShow</b> : Boolean <div class="mdesc">\r
- <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>\r
- <div class="long">\r
- 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>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#autoShow" href="output/Ext.Component.html#autoShow">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-autoWidth"></a>\r
- <b>autoWidth</b> : Boolean <div class="mdesc">\r
- <div class="short">True to use width:'auto', false to use fixed width (defaults to false). Note: Although many components inherit this c...</div>\r
- <div class="long">\r
- True to use width:'auto', false to use fixed width (defaults to false). <b>Note</b>: Although many components inherit this config option, not all will function as expected with a width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.BoxComponent" ext:member="#autoWidth" href="output/Ext.BoxComponent.html#autoWidth">BoxComponent</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-baseCls"></a>\r
- <b>baseCls</b> : String <div class="mdesc">\r
- The base CSS class to apply to this panel's element (defaults to 'x-panel'). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#baseCls" href="output/Ext.Panel.html#baseCls">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-bbar"></a>\r
- <b>bbar</b> : Object/Array <div class="mdesc">\r
- <div class="short">The bottom toolbar of the panel. This can be either an Ext.Toolbar object or an array of buttons/button configs to be...</div>\r
- <div class="long">\r
- The bottom toolbar of the panel. This can be either an <a ext:cls="Ext.Toolbar" href="output/Ext.Toolbar.html">Ext.Toolbar</a> object or an array of buttons/button configs to be added to the toolbar. Note that this is not available as a property after render. To access the bottom toolbar after render, use <a ext:cls="Ext.Panel" ext:member="getBottomToolbar" href="output/Ext.Panel.html#getBottomToolbar">getBottomToolbar</a>. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#bbar" href="output/Ext.Panel.html#bbar">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-bodyBorder"></a>\r
- <b>bodyBorder</b> : Boolean <div class="mdesc">\r
- <div class="short">True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...</div>\r
- <div class="long">\r
- True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when <a ext:cls="Ext.Panel" ext:member="border" href="output/Ext.Panel.html#border">border</a> == true. If border == true and bodyBorder == false, the border will display as a 1px wide inset border, giving the entire body element an inset appearance. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#bodyBorder" href="output/Ext.Panel.html#bodyBorder">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-bodyCfg"></a>\r
- <b>bodyCfg</b> : Object <div class="mdesc">\r
- <div class="short">A DomHelper configuration object specifying the element structure of this Panel's body Element. This may be used to f...</div>\r
- <div class="long">\r
- <p>A <a ext:cls="Ext.DomHelper" href="output/Ext.DomHelper.html">DomHelper</a> configuration object specifying the element structure of this Panel's <a ext:cls="Ext.Panel" ext:member="body" href="output/Ext.Panel.html#body">body</a> Element.</p> <p>This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:</p><code><pre>new Ext.Panel({\r
- title: 'New Message',\r
- collapsible: true,\r
- renderTo: Ext.getBody(),\r
- width: 400,\r
- bodyCfg: {\r
- tag: 'center',\r
- cls: 'x-panel-body'\r
- },\r
- items: [{\r
- border: false,\r
- header: false,\r
- bodyCfg: {tag: 'h2', html: 'Message'}\r
- }, {\r
- xtype: 'textarea',\r
- style: {\r
- width: '95%',\r
- marginBottom: '10px'\r
- }\r
- },\r
- new Ext.Button({\r
- text: 'Send',\r
- minWidth: '100',\r
- style: {\r
- marginBottom: '10px'\r
- }\r
- })\r
- ]\r
-});</pre></code> </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#bodyCfg" href="output/Ext.Panel.html#bodyCfg">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-bodyStyle"></a>\r
- <b>bodyStyle</b> : String/Object/Function <div class="mdesc">\r
- <div class="short">Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...</div>\r
- <div class="long">\r
- Custom CSS styles to be applied to the body element in the format expected by <a ext:cls="Ext.Element" ext:member="applyStyles" href="output/Ext.Element.html#applyStyles">Ext.Element.applyStyles</a> (defaults to null). </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#bodyStyle" href="output/Ext.Panel.html#bodyStyle">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-border"></a>\r
- <b>border</b> : Boolean <div class="mdesc">\r
- <div class="short">True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the borde...</div>\r
- <div class="long">\r
- True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the border is a 2px wide inset border, but this can be further altered by setting <a ext:cls="Ext.Panel" ext:member="bodyBorder" href="output/Ext.Panel.html#bodyBorder">bodyBorder</a> to false. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#border" href="output/Ext.Panel.html#border">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-bufferResize"></a>\r
- <b>bufferResize</b> : Boolean/Number <div class="mdesc">\r
- <div class="short">When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...</div>\r
- <div class="long">\r
- When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers with a large quantity of sub-components for which frequent layout calls would be expensive. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Container" ext:member="#bufferResize" href="output/Ext.Container.html#bufferResize">Container</a></td>\r
- </tr>\r
- <tr class="config-row">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-buttonAlign"></a>\r
- <b>buttonAlign</b> : String <div class="mdesc">\r
- Valid values are "left," "center" and "right" (defaults to "center") </div>\r
- </td>\r
- <td class="msource">FormPanel</td>\r
- </tr>\r
- <tr class="config-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-buttons"></a>\r
- <b>buttons</b> : Array <div class="mdesc">\r
- <div class="short">An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this FormPanel. Buttons in the foo...</div>\r
- <div class="long">\r
- An array of <a ext:cls="Ext.Button" href="output/Ext.Button.html">Ext.Button</a>s or <a ext:cls="Ext.Button" href="output/Ext.Button.html">Ext.Button</a> 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 <a ext:cls="Ext.form.FormPanel" ext:member="monitorValid" href="output/Ext.form.FormPanel.html#monitorValid">valid state monitor task</a> to enable/disable those Buttons depending on the form's valid/invalid state.</p> </div>\r
- </div>\r
- </td>\r
- <td class="msource">FormPanel</td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-clearCls"></a>\r
- <b>clearCls</b> : String <div class="mdesc">\r
- <div class="short">The CSS class used to provide field clearing (defaults to 'x-form-clear-left'). This config is only used when this Co...</div>\r
- <div class="long">\r
- The CSS class used to provide field clearing (defaults to 'x-form-clear-left'). <p><b>This config is only used when this Component is rendered by a Container which has been configured to use the <a ext:cls="Ext.form.FormLayout" href="output/Ext.form.FormLayout.html">FormLayout</a> layout manager.</b></p> </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#clearCls" href="output/Ext.Component.html#clearCls">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-cls"></a>\r
- <b>cls</b> : String <div class="mdesc">\r
- <div class="short">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for a...</div>\r
- <div class="long">\r
- An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for adding customized styles to the component or any of its children using standard CSS rules. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#cls" href="output/Ext.Component.html#cls">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-collapseFirst"></a>\r
- <b>collapseFirst</b> : Boolean <div class="mdesc">\r
- <div class="short">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...</div>\r
- <div class="long">\r
- True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the panel's title bar, false to render it last (defaults to true). </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#collapseFirst" href="output/Ext.Panel.html#collapseFirst">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-collapsed"></a>\r
- <b>collapsed</b> : Boolean <div class="mdesc">\r
- True to render the panel collapsed, false to render it expanded (defaults to false). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#collapsed" href="output/Ext.Panel.html#collapsed">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-collapsedCls"></a>\r
- <b>collapsedCls</b> : String <div class="mdesc">\r
- A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed'). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#collapsedCls" href="output/Ext.Panel.html#collapsedCls">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-collapsible"></a>\r
- <b>collapsible</b> : Boolean <div class="mdesc">\r
- <div class="short">True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...</div>\r
- <div class="long">\r
- True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header tool button area, false to keep the panel statically sized with no button (defaults to false). </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#collapsible" href="output/Ext.Panel.html#collapsible">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-contentEl"></a>\r
- <b>contentEl</b> : String <div class="mdesc">\r
- <div class="short">The id of an existing HTML node to use as the panel's body content (defaults to ''). The specified Element is appende...</div>\r
- <div class="long">\r
- The id of an existing HTML node to use as the panel's body content (defaults to ''). The specified Element is appended to the Panel's body Element by the Panel's afterRender method <i>after any configured <a ext:cls="Ext.Panel" ext:member="html" href="output/Ext.Panel.html#html">HTML</a> has been inserted</i>, and so the document will not contain this HTML at the time the render event is fired. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Panel" ext:member="#contentEl" href="output/Ext.Panel.html#contentEl">Panel</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-ctCls"></a>\r
- <b>ctCls</b> : String <div class="mdesc">\r
- <div class="short">An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for...</div>\r
- <div class="long">\r
- An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#ctCls" href="output/Ext.Component.html#ctCls">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-defaultType"></a>\r
- <b>defaultType</b> : String <div class="mdesc">\r
- <div class="short">The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...</div>\r
- <div class="long">\r
- <p>The default <a ext:cls="Ext.Component" href="output/Ext.Component.html">xtype</a> of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.</p> <p>Defaults to 'panel'.</p> </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Container" ext:member="#defaultType" href="output/Ext.Container.html#defaultType">Container</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-defaults"></a>\r
- <b>defaults</b> : Object <div class="mdesc">\r
- <div class="short">A config object that will be applied to all components added to this container either via the items config or via the...</div>\r
- <div class="long">\r
- A config object that will be applied to all components added to this container either via the <a ext:cls="Ext.Container" ext:member="items" href="output/Ext.Container.html#items">items</a> config or via the <a ext:cls="Ext.Container" ext:member="add" href="output/Ext.Container.html#add">add</a> or <a ext:cls="Ext.Container" ext:member="insert" href="output/Ext.Container.html#insert">insert</a> methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained <a ext:cls="Ext.Panel" href="output/Ext.Panel.html">Ext.Panel</a> items, you could pass: defaults: {bodyStyle:'padding:15px'}. </div>\r
- </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Container" ext:member="#defaults" href="output/Ext.Container.html#defaults">Container</a></td>\r
- </tr>\r
- <tr class="config-row inherited">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-disabled"></a>\r
- <b>disabled</b> : Boolean <div class="mdesc">\r
- Render this component disabled (default is false). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#disabled" href="output/Ext.Component.html#disabled">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited alt">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-disabledClass"></a>\r
- <b>disabledClass</b> : String <div class="mdesc">\r
- CSS class added to the component when it is disabled (defaults to "x-item-disabled"). </div>\r
- </td>\r
- <td class="msource"><a ext:cls="Ext.Component" ext:member="#disabledClass" href="output/Ext.Component.html#disabledClass">Component</a></td>\r
- </tr>\r
- <tr class="config-row inherited expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.form.FormPanel-draggable"></a>\r
- <b>draggable</b> : Boolean <div class="mdesc">\r
- <div class="short">True to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...</div>\r
- <div class="long">\r
- <p>True to enable dragging of this Panel (defaults to false).</p> <p>For custom drag/drop implementations, an Ext.Panel.DD config could also be passed in this config instead of true. Ext.Panel.DD is an internal, undocumented class which moves a proxy Element around in place of the Panel's element, but provides no other behaviour during dragging or on drop. It is a subclass of <a ext:cls="Ext.dd.DragSource" href="output/Ext.dd.DragSource.html">Ext.dd.DragSource</a>, so behaviour may be added by implementing the interface methods of <a ext:cls="Ext.dd.DragDrop" href="output/Ext.dd.DragDrop.html">Ext.dd.DragDrop</a> eg: <pre><code>new Ext.Panel({
+<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Panel.html" ext:member="" ext:cls="Ext.Panel">Panel</a> <img src="resources/elbow-end.gif">FormPanel</pre></div><h1>Class <a href="source/Form.html#cls-Ext.form.FormPanel">Ext.form.FormPanel</a></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"><a href="source/Form.html#cls-Ext.form.FormPanel">FormPanel</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel" ext:member="">Panel</a></td></tr></table><div class="description"><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 <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>
+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
+<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a> 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 <a href="output/Ext.form.BasicForm.html" ext:cls="Ext.form.BasicForm">Ext.form.BasicForm</a> for:
+<div class="mdetail-params"><ul>
+<li><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-fileUpload" ext:member="fileUpload" ext:cls="Ext.form.BasicForm">file uploads</a></li>
+<li>functionality for <a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction" ext:member="doAction" ext:cls="Ext.form.BasicForm">loading, validating and submitting</a> 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 <a href="output/Ext.form.BasicForm.html" ext:cls="Ext.form.BasicForm">BasicForm</a>
+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><a href="output/Ext.form.TextField.html" ext:cls="Ext.form.TextField">Ext.form.TextField</a></li>
+<li><a href="output/Ext.form.VTypes.html" ext:cls="Ext.form.VTypes">Ext.form.VTypes</a></li>
+<li><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-doAction" ext:member="doAction" ext:cls="Ext.form.BasicForm">BasicForm.doAction <b>clientValidation</b> notes</a></li>
+<li><tt><a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-monitorValid" ext:member="monitorValid" ext:cls="Ext.form.FormPanel">monitorValid</a></tt></li>
+</ul></div>
+<p><b><u>Form Submission</u></b></p>
+<p>By default, Ext Forms are submitted through Ajax, using <a href="output/Ext.form.Action.html" ext:cls="Ext.form.Action">Ext.form.Action</a>. To enable normal browser
+submission of the <a href="output/Ext.form.BasicForm.html" ext:cls="Ext.form.BasicForm">BasicForm</a> contained in this FormPanel, see the
+<tt><b><a href="output/Ext.form.BasicForm.html#Ext.form.BasicForm-standardSubmit" ext:member="standardSubmit" ext:cls="Ext.form.BasicForm">standardSubmit</a></b></tt> option.</p></div><div class="hr"></div><a id="Ext.form.FormPanel-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-activeItem"></a><b><a href="source/Container.html#cfg-Ext.Container-activeItem">activeItem</a></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\r
+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 href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</a>, <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> and
+<a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem" ext:member="activeItem" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout.activeItem</a>.</div></div></td><td class="msource"><a href="output/Ext.Container.html#activeItem" ext:member="#activeItem" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-allowDomMove"></a><b><a href="source/Component.html#cfg-Ext.Component-allowDomMove">allowDomMove</a></b> : Boolean<div class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</div></td><td class="msource"><a href="output/Ext.Component.html#allowDomMove" ext:member="#allowDomMove" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-anchor"></a><b><a href="source/Component.html#cfg-Ext.Component-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered\r
+by a Container which has been configured to use an Anc...</div><div class="long"><p><b>Note</b>: this config is only used when this Component is rendered
+by a Container which has been configured to use an <b><a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">AnchorLayout</a></b>
+based layout manager, for example:<div class="mdetail-params"><ul>
+<li><a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a></li>
+<li>specifying <code>layout: <em>'anchor'</em> <i>// or <em>'form'</em>, or <em>'absolute'</em></i></code></li>
+</ul></div></p>
+<p>See <a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>.<a href="output/Ext.layout.AnchorLayout.html#Ext.layout.AnchorLayout-anchor" ext:member="anchor" ext:cls="Ext.layout.AnchorLayout">anchor</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#anchor" ext:member="#anchor" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-animCollapse"></a><b><a href="source/Panel.html#cfg-Ext.Panel-animCollapse">animCollapse</a></b> : Boolean<div class="mdesc"><div class="short">true to animate the transition when the panel is collapsed, false to skip the\r
+animation (defaults to true if the Ext....</div><div class="long"><code>true</code> to animate the transition when the panel is collapsed, <code>false</code> to skip the
+animation (defaults to <code>true</code> if the <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> class is available, otherwise <code>false</code>).</div></div></td><td class="msource"><a href="output/Ext.Panel.html#animCollapse" ext:member="#animCollapse" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-applyTo"></a><b><a href="source/Panel.html#cfg-Ext.Panel-applyTo">applyTo</a></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\r
+the document ...</div><div class="long"><p>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 panel-specific structural markup. When <code>applyTo</code> is used,
+constituent parts of the panel can be specified by CSS class name within the main element, and the panel
+will automatically create those components from that markup. Any required components not specified in the
+markup will be autogenerated if necessary.</p>
+<p>The following class names are supported (baseCls will be replaced by <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>):</p>
+<ul><li>baseCls + '-header'</li>
+<li>baseCls + '-header-text'</li>
+<li>baseCls + '-bwrap'</li>
+<li>baseCls + '-tbar'</li>
+<li>baseCls + '-body'</li>
+<li>baseCls + '-bbar'</li>
+<li>baseCls + '-footer'</li></ul>
+<p>Using this config, a call to render() is not required. If applyTo is specified, any value passed for
+<a href="output/Ext.Panel.html#Ext.Panel-renderTo" ext:member="renderTo" ext:cls="Ext.Panel">renderTo</a> will be ignored and the target element's parent node will automatically be used as the
+panel's container.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#applyTo" ext:member="#applyTo" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-autoDestroy"></a><b><a href="source/Container.html#cfg-Ext.Container-autoDestroy">autoDestroy</a></b> : Boolean<div class="mdesc"><div class="short">If true the container will automatically destroy any contained component that is removed from it, else\r
+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 href="output/Ext.Container.html#autoDestroy" ext:member="#autoDestroy" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-autoHeight"></a><b><a href="source/Panel.html#cfg-Ext.Panel-autoHeight">autoHeight</a></b> : Boolean<div class="mdesc"><div class="short">true to use height:'auto', false to use fixed height (defaults to false).\r
+Note: Setting autoHeight: true means that t...</div><div class="long"><code>true</code> to use height:'auto', <code>false</code> to use fixed height (defaults to <code>false</code>).
+<b>Note</b>: Setting <code>autoHeight: true</code> means that the browser will manage the panel's height
+based on its contents, and that Ext will not manage it at all. If the panel is within a layout that
+manages dimensions (<code>fit</code>, <code>border</code>, etc.) then setting <code>autoHeight: true</code>
+can cause issues with scrolling and will not generally work as expected since the panel will take
+on the height of its contents rather than the height required by the Ext layout.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#autoHeight" ext:member="#autoHeight" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-autoLoad"></a><b><a href="source/Panel.html#cfg-Ext.Panel-autoLoad">autoLoad</a></b> : Object/String/Function<div class="mdesc"><div class="short">A valid url spec according to the Updater Ext.Updater.update method.\r
+If autoLoad is not null, the panel will attempt ...</div><div class="long">A valid url spec according to the Updater <a href="output/Ext.Updater.html#Ext.Updater-update" ext:member="update" ext:cls="Ext.Updater">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 href="output/Ext.Panel.html#Ext.Panel-body" ext:member="body" ext:cls="Ext.Panel">body</a> element,
+so it may be <a href="output/Ext.Element.html#Ext.Element-refresh" ext:member="refresh" ext:cls="Ext.Element">refresh</a>ed at any time.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#autoLoad" ext:member="#autoLoad" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-autoScroll"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-autoScroll">autoScroll</a></b> : Boolean<div class="mdesc"><div class="short">true to use overflow:'auto' on the components layout element and show scroll bars automatically when\r
+necessary, false...</div><div class="long"><code>true</code> to use overflow:'auto' on the components layout element and show scroll bars automatically when
+necessary, <code>false</code> to clip any overflowing content (defaults to <code>false</code>).</div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#autoScroll" ext:member="#autoScroll" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-autoShow"></a><b><a href="source/Component.html#cfg-Ext.Component-autoShow">autoShow</a></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\r
+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 href="output/Ext.Component.html#autoShow" ext:member="#autoShow" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-autoWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-autoWidth">autoWidth</a></b> : Boolean<div class="mdesc"><div class="short">True to use width:'auto', false to use fixed width (or allow it to be managed by its parent\r
+Container's layout manage...</div><div class="long"><p>True to use width:'auto', false to use fixed width (or allow it to be managed by its parent
+Container's <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout manager</a>. Defaults to false.</p>
+<p><b>Note</b>: Although many components inherit this config option, not all will
+function as expected with a width of 'auto'. Setting autoWidth:true means that the
+browser will manage width based on the element's contents, and that Ext will not manage it at all.</p>
+<p>If the <i>browser</i> is managing the width, be aware that resizes performed by the browser in response
+to changes within the structure of the Component cannot be detected. Therefore changes to the width might
+result in elements needing to be synchronized with the new width. For example, where the target element is:</p><pre><code><div id=<em>'grid-container'</em> style=<em>'margin-left:25%;width:50%'</em>></div></code></pre>
+A Panel rendered into that target element must listen for browser window resize in order to relay its
+child items when the browser changes its width:<pre><code><b>var</b> myPanel = <b>new</b> Ext.Panel({
+ renderTo: <em>'grid-container'</em>,
+ monitorResize: true, <i>// relay on browser resize</i>
+ title: <em>'Panel'</em>,
+ height: 400,
+ autoWidth: true,
+ layout: <em>'hbox'</em>,
+ layoutConfig: {
+ align: <em>'stretch'</em>
+ },
+ defaults: {
+ flex: 1
+ },
+ items: [{
+ title: <em>'Box 1'</em>,
+ }, {
+ title: <em>'Box 2'</em>
+ }, {
+ title: <em>'Box 3'</em>
+ }],
+});</code></pre></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#autoWidth" ext:member="#autoWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-baseCls"></a><b><a href="source/Panel.html#cfg-Ext.Panel-baseCls">baseCls</a></b> : String<div class="mdesc"><div class="short">The base CSS class to apply to this panel's element (defaults to 'x-panel').\r
+Another option available by default is t...</div><div class="long">The base CSS class to apply to this panel's element (defaults to <code><em>'x-panel'</em></code>).
+<p>Another option available by default is to specify <code><em>'x-plain'</em></code> which strips all styling
+except for required attributes for Ext layouts to function (e.g. overflow:hidden).
+See <code><a href="output/Ext.Panel.html#Ext.Panel-unstyled" ext:member="unstyled" ext:cls="Ext.Panel">unstyled</a></code> also.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#baseCls" ext:member="#baseCls" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bbar"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bbar">bbar</a></b> : Object/Array<div class="mdesc"><div class="short">The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of\r
+buttons/button co...</div><div class="long"><p>The bottom toolbar of the panel. This can be a <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Ext.Toolbar</a> object, a toolbar config, or an array of
+buttons/button configs to be added to the toolbar. Note that this is not available as a property after render.
+To access the bottom toolbar after render, use <a href="output/Ext.Panel.html#Ext.Panel-getBottomToolbar" ext:member="getBottomToolbar" ext:cls="Ext.Panel">getBottomToolbar</a>.</p>
+<p><b>Note:</b> Although a Toolbar may contain Field components, these will <b>not</b> be updated by a load
+of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and
+so are not scanned to collect form items. However, the values <b>will</b> be submitted because form
+submission parameters are collected from the DOM tree.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#bbar" ext:member="#bbar" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bbarCfg"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bbarCfg">bbarCfg</a></b> : Object<div class="mdesc"><div class="short">A DomHelper element specification object specifying the element structure\r
+of this Panel's bbar Element. See bodyCfg ...</div><div class="long"><p>A <a href="output/Ext.DomHelper.html" ext:cls="Ext.DomHelper">DomHelper</a> element specification object specifying the element structure
+of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bbar" ext:member="bbar" ext:cls="Ext.Panel">bbar</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg" ext:member="bodyCfg" ext:cls="Ext.Panel">bodyCfg</a></code> also.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#bbarCfg" ext:member="#bbarCfg" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bodyBorder"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bodyBorder">bodyBorder</a></b> : Boolean<div class="mdesc"><div class="short">True to display an interior border on the body element of the panel, false to hide it (defaults to true).\r
+This only a...</div><div class="long">True to display an interior border on the body element of the panel, false to hide it (defaults to true).
+This only applies when <a href="output/Ext.Panel.html#Ext.Panel-border" ext:member="border" ext:cls="Ext.Panel">border</a> == true. If border == true and bodyBorder == false, the border will display
+as a 1px wide inset border, giving the entire body element an inset appearance.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#bodyBorder" ext:member="#bodyBorder" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bodyCfg"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bodyCfg">bodyCfg</a></b> : Object<div class="mdesc"><div class="short">A DomHelper element specification object may be specified for any\r
+Panel Element.\r
+By default, the Default element in t...</div><div class="long"><p>A <a href="output/Ext.DomHelper.html" ext:cls="Ext.DomHelper">DomHelper</a> element specification object may be specified for any
+Panel Element.</p>
+<p>By default, the Default element in the table below will be used for the html markup to
+create a child element with the commensurate Default class name (<code>baseCls</code> will be
+replaced by <code><a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a></code>):</p>
+<pre>
+Panel Default Default Custom Additional Additional
+Element element class element class style
+======== ========================== ========= ============== ===========
+<a href="output/Ext.Panel.html#Ext.Panel-header" ext:member="header" ext:cls="Ext.Panel">header</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-header' <a href="output/Ext.Panel.html#Ext.Panel-headerCfg" ext:member="headerCfg" ext:cls="Ext.Panel">headerCfg</a> headerCssClass headerStyle
+<a href="output/Ext.Panel.html#Ext.Panel-bwrap" ext:member="bwrap" ext:cls="Ext.Panel">bwrap</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-bwrap' <a href="output/Ext.Panel.html#Ext.Panel-bwrapCfg" ext:member="bwrapCfg" ext:cls="Ext.Panel">bwrapCfg</a> bwrapCssClass bwrapStyle
++ tbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-tbar' <a href="output/Ext.Panel.html#Ext.Panel-tbarCfg" ext:member="tbarCfg" ext:cls="Ext.Panel">tbarCfg</a> tbarCssClass tbarStyle
++ <a href="output/Ext.Panel.html#Ext.Panel-body" ext:member="body" ext:cls="Ext.Panel">body</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-body' <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg" ext:member="bodyCfg" ext:cls="Ext.Panel">bodyCfg</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyCssClass" ext:member="bodyCssClass" ext:cls="Ext.Panel">bodyCssClass</a> <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle" ext:member="bodyStyle" ext:cls="Ext.Panel">bodyStyle</a>
++ bbar div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-bbar' <a href="output/Ext.Panel.html#Ext.Panel-bbarCfg" ext:member="bbarCfg" ext:cls="Ext.Panel">bbarCfg</a> bbarCssClass bbarStyle
++ <a href="output/Ext.Panel.html#Ext.Panel-footer" ext:member="footer" ext:cls="Ext.Panel">footer</a> div <a href="output/Ext.Panel.html#Ext.Panel-baseCls" ext:member="baseCls" ext:cls="Ext.Panel">baseCls</a>+'-footer' <a href="output/Ext.Panel.html#Ext.Panel-footerCfg" ext:member="footerCfg" ext:cls="Ext.Panel">footerCfg</a> footerCssClass footerStyle
+</pre>
+<p>Configuring a Custom element may be used, for example, to force the <a href="output/Ext.Panel.html#Ext.Panel-body" ext:member="body" ext:cls="Ext.Panel">body</a> Element
+to use a different form of markup than is created by default. An example of this might be
+to <a href="output/Ext.Element.html#Ext.Element-createChild" ext:member="createChild" ext:cls="Ext.Element">create a child</a> Panel containing a custom content, such as
+a header, or forcing centering of all Panel content by having the body be a <center>
+element:</p>
+<pre><code><b>new</b> Ext.Panel({
+ title: <em>'Message Title'</em>,
+ renderTo: Ext.getBody(),
+ width: 200, height: 130,
+ <b>bodyCfg</b>: {
+ tag: <em>'center'</em>,
+ cls: <em>'x-panel-body'</em>, <i>// Default class not applied <b>if</b> Custom element specified</i>
+ html: <em>'Message'</em>
+ },
+ footerCfg: {
+ tag: <em>'h2'</em>,
+ cls: <em>'x-panel-footer'</em> <i>// same as the Default class</i>
+ html: <em>'footer html'</em>
+ },
+ footerCssClass: <em>'custom-footer'</em>, <i>// additional css class, see <a href="output/Ext.element.html#Ext.element-addClass" ext:member="addClass" ext:cls="Ext.element">addClass</a></i>
+ footerStyle: <em>'background-color:red'</em> <i>// see <a href="output/Ext.Panel.html#Ext.Panel-bodyStyle" ext:member="bodyStyle" ext:cls="Ext.Panel">bodyStyle</a></i>
+});</code></pre>
+<p>The example above also explicitly creates a <code><a href="output/Ext.Panel.html#Ext.Panel-footer" ext:member="footer" ext:cls="Ext.Panel">footer</a></code> with custom markup and
+styling applied.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#bodyCfg" ext:member="#bodyCfg" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bodyCssClass"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bodyCssClass">bodyCssClass</a></b> : String/Object/Function<div class="mdesc"><div class="short">Additional css class selector to be applied to the body element in the format expected by\r
+Ext.Element.addClass (defau...</div><div class="long">Additional css class selector to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body" ext:member="body" ext:cls="Ext.Panel">body</a> element in the format expected by
+<a href="output/Ext.Element.html#Ext.Element-addClass" ext:member="addClass" ext:cls="Ext.Element">Ext.Element.addClass</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg" ext:member="bodyCfg" ext:cls="Ext.Panel">bodyCfg</a>.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#bodyCssClass" ext:member="#bodyCssClass" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bodyStyle"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bodyStyle">bodyStyle</a></b> : String/Object/Function<div class="mdesc"><div class="short">Custom CSS styles to be applied to the body element in the format expected by\r
+Ext.Element.applyStyles (defaults to nu...</div><div class="long">Custom CSS styles to be applied to the <a href="output/Ext.Panel.html#Ext.Panel-body" ext:member="body" ext:cls="Ext.Panel">body</a> element in the format expected by
+<a href="output/Ext.Element.html#Ext.Element-applyStyles" ext:member="applyStyles" ext:cls="Ext.Element">Ext.Element.applyStyles</a> (defaults to null). See <a href="output/Ext.Panel.html#Ext.Panel-bodyCfg" ext:member="bodyCfg" ext:cls="Ext.Panel">bodyCfg</a>.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#bodyStyle" ext:member="#bodyStyle" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-border"></a><b><a href="source/Panel.html#cfg-Ext.Panel-border">border</a></b> : Boolean<div class="mdesc"><div class="short">True to display the borders of the panel's body element, false to hide them (defaults to true). By default,\r
+the bord...</div><div class="long">True to display the borders of the panel's body element, false to hide them (defaults to true). By default,
+the border is a 2px wide inset border, but this can be further altered by setting <a href="output/Ext.Panel.html#Ext.Panel-bodyBorder" ext:member="bodyBorder" ext:cls="Ext.Panel">bodyBorder</a> to false.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#border" ext:member="#border" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMaxHeight"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMaxHeight">boxMaxHeight</a></b> : Number<div class="mdesc"><div class="short">The maximum value in pixels which this BoxComponent will set its height to.\r
+Warning: This will override any size mana...</div><div class="long"><p>The maximum value in pixels which this BoxComponent will set its height to.</p>
+<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMaxHeight" ext:member="#boxMaxHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMaxWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMaxWidth">boxMaxWidth</a></b> : Number<div class="mdesc"><div class="short">The maximum value in pixels which this BoxComponent will set its width to.\r
+Warning: This will override any size manag...</div><div class="long"><p>The maximum value in pixels which this BoxComponent will set its width to.</p>
+<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMaxWidth" ext:member="#boxMaxWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMinHeight"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMinHeight">boxMinHeight</a></b> : Number<div class="mdesc"><div class="short">The minimum value in pixels which this BoxComponent will set its height to.\r
+Warning: This will override any size mana...</div><div class="long"><p>The minimum value in pixels which this BoxComponent will set its height to.</p>
+<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMinHeight" ext:member="#boxMinHeight" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-boxMinWidth"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-boxMinWidth">boxMinWidth</a></b> : Number<div class="mdesc"><div class="short">The minimum value in pixels which this BoxComponent will set its width to.\r
+Warning: This will override any size manag...</div><div class="long"><p>The minimum value in pixels which this BoxComponent will set its width to.</p>
+<p><b>Warning:</b> This will override any size management applied by layout managers.</p></div></div></td><td class="msource"><a href="output/Ext.BoxComponent.html#boxMinWidth" ext:member="#boxMinWidth" ext:cls="Ext.BoxComponent">BoxComponent</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-bubbleEvents"></a><b><a href="source/Container.html#cfg-Ext.Container-bubbleEvents">bubbleEvents</a></b> : Array<div class="mdesc"><div class="short">An array of events that, when fired, should be bubbled to any parent container.\r
+See Ext.util.Observable.enableBubble....</div><div class="long"><p>An array of events that, when fired, should be bubbled to any parent container.
+See <a href="output/Ext.util.Observable.html#Ext.util.Observable-enableBubble" ext:member="enableBubble" ext:cls="Ext.util.Observable">Ext.util.Observable.enableBubble</a>.
+Defaults to <code>[<em>'add'</em>, <em>'remove'</em>]</code>.</div></div></td><td class="msource"><a href="output/Ext.Container.html#bubbleEvents" ext:member="#bubbleEvents" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-bufferResize"></a><b><a href="source/Container.html#cfg-Ext.Container-bufferResize">bufferResize</a></b> : Boolean/Number<div class="mdesc"><div class="short">When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer\r
+th...</div><div class="long">When set to true (50 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer
+the frequency it calculates and does a re-layout of components. This is useful for heavy containers or containers
+with a large quantity of sub-components for which frequent layout calls would be expensive. Defaults to <code>50</code>.</div></div></td><td class="msource"><a href="output/Ext.Container.html#bufferResize" ext:member="#bufferResize" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-buttonAlign"></a><b><a href="source/Panel.html#cfg-Ext.Panel-buttonAlign">buttonAlign</a></b> : String<div class="mdesc"><div class="short">The alignment of any buttons added to this panel. Valid values are 'right',\r
+'left' and 'center' (defaults to 'right'...</div><div class="long">The alignment of any <a href="output/Ext.Panel.html#Ext.Panel-buttons" ext:member="buttons" ext:cls="Ext.Panel">buttons</a> added to this panel. Valid values are <code><em>'right'</em></code>,
+<code><em>'left'</em></code> and <code><em>'center'</em></code> (defaults to <code><em>'right'</em></code>).</div></div></td><td class="msource"><a href="output/Ext.Panel.html#buttonAlign" ext:member="#buttonAlign" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.form.FormPanel-buttons"></a><b><a href="source/Form.html#cfg-Ext.form.FormPanel-buttons">buttons</a></b> : Array<div class="mdesc"><div class="short">An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this FormPanel.\r
+Buttons in the foo...</div><div class="long">An array of <a href="output/Ext.Button.html" ext:cls="Ext.Button">Ext.Button</a>s or <a href="output/Ext.Button.html" ext:cls="Ext.Button">Ext.Button</a> 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 <a href="output/Ext.form.FormPanel.html#Ext.form.FormPanel-monitorValid" ext:member="monitorValid" ext:cls="Ext.form.FormPanel">valid state monitor task</a> to enable/disable those Buttons depending on
+the form's valid/invalid state.</p></div></div></td><td class="msource">FormPanel</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-bwrapCfg"></a><b><a href="source/Panel.html#cfg-Ext.Panel-bwrapCfg">bwrapCfg</a></b> : Object<div class="mdesc"><div class="short">A DomHelper element specification object specifying the element structure\r
+of this Panel's bwrap Element. See bodyCfg...</div><div class="long"><p>A <a href="output/Ext.DomHelper.html" ext:cls="Ext.DomHelper">DomHelper</a> element specification object specifying the element structure
+of this Panel's <a href="output/Ext.Panel.html#Ext.Panel-bwrap" ext:member="bwrap" ext:cls="Ext.Panel">bwrap</a> Element. See <code><a href="output/Ext.Panel.html#Ext.Panel-bodyCfg" ext:member="bodyCfg" ext:cls="Ext.Panel">bodyCfg</a></code> also.</p></div></div></td><td class="msource"><a href="output/Ext.Panel.html#bwrapCfg" ext:member="#bwrapCfg" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-clearCls"></a><b><a href="source/Component.html#cfg-Ext.Component-clearCls">clearCls</a></b> : String<div class="mdesc"><div class="short">The CSS class used to to apply to the special clearing div rendered\r
+directly after each form field wrapper to provide...</div><div class="long"><p>The CSS class used to to apply to the special clearing div rendered
+directly after each form field wrapper to provide field clearing (defaults to
+<tt>'x-form-clear-left'</tt>).</p>
+<br><p><b>Note</b>: this config is only used when this Component is rendered by a Container
+which has been configured to use the <b><a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">FormLayout</a></b> layout
+manager (e.g. <a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">Ext.form.FormPanel</a> or specifying <tt>layout:'form'</tt>) and either a
+<tt><a href="output/Ext.Component.html#Ext.Component-fieldLabel" ext:member="fieldLabel" ext:cls="Ext.Component">fieldLabel</a></tt> is specified or <tt>isFormField=true</tt> is specified.</p><br>
+<p>See <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>.<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-fieldTpl" ext:member="fieldTpl" ext:cls="Ext.layout.FormLayout">fieldTpl</a> also.</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#clearCls" ext:member="#clearCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-closable"></a><b><a href="source/Panel.html#cfg-Ext.Panel-closable">closable</a></b> : Boolean<div class="mdesc"><div class="short">Panels themselves do not directly support being closed, but some Panel subclasses do (like\r
+Ext.Window) or a Panel Cla...</div><div class="long">Panels themselves do not directly support being closed, but some Panel subclasses do (like
+<a href="output/Ext.Window.html" ext:cls="Ext.Window">Ext.Window</a>) or a Panel Class within an <a href="output/Ext.TabPanel.html" ext:cls="Ext.TabPanel">Ext.TabPanel</a>. Specify <code>true</code>
+to enable closing in such situations. Defaults to <code>false</code>.</div></div></td><td class="msource"><a href="output/Ext.Panel.html#closable" ext:member="#closable" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-cls"></a><b><a href="source/Component.html#cfg-Ext.Component-cls">cls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be\r
+useful for ...</div><div class="long">An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
+useful for adding customized styles to the component or any of its children using standard CSS rules.</div></div></td><td class="msource"><a href="output/Ext.Component.html#cls" ext:member="#cls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-collapseFirst"></a><b><a href="source/Panel.html#cfg-Ext.Panel-collapseFirst">collapseFirst</a></b> : Boolean<div class="mdesc"><div class="short">true to make sure the collapse/expand toggle button always renders first (to the left of)\r
+any other tools in the pane...</div><div class="long"><code>true</code> to make sure the collapse/expand toggle button always renders first (to the left of)
+any other tools in the panel's title bar, <code>false</code> to render it last (defaults to <code>true</code>).</div></div></td><td class="msource"><a href="output/Ext.Panel.html#collapseFirst" ext:member="#collapseFirst" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-collapsed"></a><b><a href="source/Panel.html#cfg-Ext.Panel-collapsed">collapsed</a></b> : Boolean<div class="mdesc"><code>true</code> to render the panel collapsed, <code>false</code> to render it expanded (defaults to
+<code>false</code>).</div></td><td class="msource"><a href="output/Ext.Panel.html#collapsed" ext:member="#collapsed" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-collapsedCls"></a><b><a href="source/Panel.html#cfg-Ext.Panel-collapsedCls">collapsedCls</a></b> : String<div class="mdesc">A CSS class to add to the panel's element after it has been collapsed (defaults to
+<code><em>'x-panel-collapsed'</em></code>).</div></td><td class="msource"><a href="output/Ext.Panel.html#collapsedCls" ext:member="#collapsedCls" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-collapsible"></a><b><a href="source/Panel.html#cfg-Ext.Panel-collapsible">collapsible</a></b> : Boolean<div class="mdesc"><div class="short">True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into\r
+the header ...</div><div class="long">True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
+the header tool button area, false to keep the panel statically sized with no button (defaults to false).</div></div></td><td class="msource"><a href="output/Ext.Panel.html#collapsible" ext:member="#collapsible" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-contentEl"></a><b><a href="source/Component.html#cfg-Ext.Component-contentEl">contentEl</a></b> : String<div class="mdesc"><div class="short">Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content\r
+for this comp...</div><div class="long"><p>Optional. Specify an existing HTML element, or the <code>id</code> of an existing HTML element to use as the content
+for this component.</p>
+<ul>
+<li><b>Description</b> :
+<div class="sub-desc">This config option is used to take an existing HTML element and place it in the layout element
+of a new component (it simply moves the specified DOM element <i>after the Component is rendered</i> to use as the content.</div></li>
+<li><b>Notes</b> :
+<div class="sub-desc">The specified HTML element is appended to the layout element of the component <i>after any configured
+<a href="output/Ext.Component.html#Ext.Component-html" ext:member="html" ext:cls="Ext.Component">HTML</a> has been inserted</i>, and so the document will not contain this element at the time the <a href="output/Ext.Component.html#Ext.Component-render" ext:member="render" ext:cls="Ext.Component">render</a> event is fired.</div>
+<div class="sub-desc">The specified HTML element used will not participate in any <code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code>
+scheme that the Component may use. It is just HTML. Layouts operate on child <code><b><a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a></b></code>.</div>
+<div class="sub-desc">Add either the <code>x-hidden</code> or the <code>x-hide-display</code> CSS class to
+prevent a brief flicker of the content before it is rendered to the panel.</div></li>
+</ul></div></div></td><td class="msource"><a href="output/Ext.Component.html#contentEl" ext:member="#contentEl" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-ctCls"></a><b><a href="source/Component.html#cfg-Ext.Component-ctCls">ctCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to this component's container. This can be useful for\r
+adding customize...</div><div class="long"><p>An optional extra CSS class that will be added to this component's container. This can be useful for
+adding customized styles to the container or any of its children using standard CSS rules. See
+<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout</a>.<a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-extraCls" ext:member="extraCls" ext:cls="Ext.layout.ContainerLayout">extraCls</a> also.</p>
+<p><b>Note</b>: <tt>ctCls</tt> defaults to <tt>''</tt> except for the following class
+which assigns a value by default:
+<div class="mdetail-params"><ul>
+<li><a href="output/Ext.layout.Box.html" ext:cls="Ext.layout.Box">Box Layout</a> : <tt>'x-box-layout-ct'</tt></li>
+</ul></div>
+To configure the above Class with an extra CSS class append to the default. For example,
+for BoxLayout (Hbox and Vbox):<pre><code>ctCls: <em>'x-box-layout-ct custom-class'</em></code></pre>
+</p></div></div></td><td class="msource"><a href="output/Ext.Component.html#ctCls" ext:member="#ctCls" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-data"></a><b><a href="source/Component.html#cfg-Ext.Component-data">data</a></b> : Mixed<div class="mdesc">The initial set of data to apply to the <code><a href="output/Ext.Component.html#Ext.Component-tpl" ext:member="tpl" ext:cls="Ext.Component">tpl</a></code> to
+update the content area of the Component.</div></td><td class="msource"><a href="output/Ext.Component.html#data" ext:member="#data" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-defaultType"></a><b><a href="source/Container.html#cfg-Ext.Container-defaultType">defaultType</a></b> : String<div class="mdesc"><div class="short">The default xtype of child Components to create in this Container when\r
+a child item is specified as a raw configurati...</div><div class="long"><p>The default <a href="output/Ext.Component.html" ext:cls="Ext.Component">xtype</a> of child Components to create in this Container when
+a child item is specified as a raw configuration object, rather than as an instantiated Component.</p>
+<p>Defaults to <code><em>'panel'</em></code>, except <a href="output/Ext.menu.Menu.html" ext:cls="Ext.menu.Menu">Ext.menu.Menu</a> which defaults to <code><em>'menuitem'</em></code>,
+and <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Ext.Toolbar</a> and <a href="output/Ext.ButtonGroup.html" ext:cls="Ext.ButtonGroup">Ext.ButtonGroup</a> which default to <code><em>'button'</em></code>.</p></div></div></td><td class="msource"><a href="output/Ext.Container.html#defaultType" ext:member="#defaultType" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-defaults"></a><b><a href="source/Container.html#cfg-Ext.Container-defaults">defaults</a></b> : Object|Function<div class="mdesc"><div class="short">This option is a means of applying default settings to all added items whether added through the items\r
+config or via ...</div><div class="long"><p>This option is a means of applying default settings to all added items whether added through the <a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a>
+config or via the <a href="output/Ext.Container.html#Ext.Container-add" ext:member="add" ext:cls="Ext.Container">add</a> or <a href="output/Ext.Container.html#Ext.Container-insert" ext:member="insert" ext:cls="Ext.Container">insert</a> methods.</p>
+<p>If an added item is a config object, and <b>not</b> an instantiated Component, then the default properties are
+unconditionally applied. If the added item <b>is</b> an instantiated Component, then the default properties are
+applied conditionally so as not to override existing properties in the item.</p>
+<p>If the defaults option is specified as a function, then the function will be called using this Container as the
+scope (<code>this</code> reference) and passing the added item as the first parameter. Any resulting object
+from that call is then applied to the item as default properties.</p>
+<p>For example, to automatically apply padding to the body of each of a set of
+contained <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a> items, you could pass: <code>defaults: {bodyStyle:<em>'padding:15px'</em>}</code>.</p>
+<p>Usage:</p><pre><code>defaults: { <i>// defaults are applied to items, not the container</i>
+ autoScroll:true
+},
+items: [
+ {
+ xtype: <em>'panel'</em>, <i>// defaults <b><b>do</b> not</b> have precedence over</i>
+ id: <em>'panel1'</em>, <i>// options <b>in</b> config objects, so the defaults</i>
+ autoScroll: false <i>// will not be applied here, panel1 will be autoScroll:false</i>
+ },
+ <b>new</b> Ext.Panel({ <i>// defaults <b><b>do</b></b> have precedence over options</i>
+ id: <em>'panel2'</em>, <i>// options <b>in</b> components, so the defaults</i>
+ autoScroll: false <i>// will be applied here, panel2 will be autoScroll:true.</i>
+ })
+]</code></pre></div></div></td><td class="msource"><a href="output/Ext.Container.html#defaults" ext:member="#defaults" ext:cls="Ext.Container">Container</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-disabled"></a><b><a href="source/Panel.html#cfg-Ext.Panel-disabled">disabled</a></b> : Boolean<div class="mdesc"><div class="short">Render this panel disabled (default is false). An important note when using the disabled\r
+config on panels is that IE ...</div><div class="long">Render this panel disabled (default is <code>false</code>). An important note when using the disabled
+config on panels is that IE will often fail to initialize the disabled mask element correectly if
+the panel's layout has not yet completed by the time the Panel is disabled during the render process.
+If you experience this issue, you may need to instead use the <a href="output/Ext.Panel.html#Ext.Panel-afterlayout" ext:member="afterlayout" ext:cls="Ext.Panel">afterlayout</a> event to initialize
+the disabled state:
+<pre><code><b>new</b> Ext.Panel({
+ ...
+ listeners: {
+ <em>'afterlayout'</em>: {
+ fn: <b>function</b>(p){
+ p.disable();
+ },
+ single: true <i>// important, as many layouts can occur</i>
+ }
+ }
+});</code></pre></div></div></td><td class="msource"><a href="output/Ext.Panel.html#disabled" ext:member="#disabled" ext:cls="Ext.Panel">Panel</a></td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-disabledClass"></a><b><a href="source/Component.html#cfg-Ext.Component-disabledClass">disabledClass</a></b> : String<div class="mdesc">CSS class added to the component when it is disabled (defaults to 'x-item-disabled').</div></td><td class="msource"><a href="output/Ext.Component.html#disabledClass" ext:member="#disabledClass" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Panel-draggable"></a><b><a href="source/Panel.html#cfg-Ext.Panel-draggable">draggable</a></b> : Boolean/Object<div class="mdesc"><div class="short">true to enable dragging of this Panel (defaults to false).\r
+For custom drag/drop implementations, an Ext.Panel.DD conf...</div><div class="long"><p><code>true</code> to enable dragging of this Panel (defaults to <code>false</code>).</p>
+<p>For custom drag/drop implementations, an <b>Ext.Panel.DD</b> config could also be passed
+in this config instead of <code>true</code>. Ext.Panel.DD is an internal, undocumented class which
+moves a proxy Element around in place of the Panel's element, but provides no other behaviour
+during dragging or on drop. It is a subclass of <a href="output/Ext.dd.DragSource.html" ext:cls="Ext.dd.DragSource">Ext.dd.DragSource</a>, so behaviour may be
+added by implementing the interface methods of <a href="output/Ext.dd.DragDrop.html" ext:cls="Ext.dd.DragDrop">Ext.dd.DragDrop</a> e.g.:
+<pre><code><b>new</b> Ext.Panel({
git.ithinksw.org / extjs.git / blobdiff