Go to most recent revision | Blame | Last modification | View Log | RSS feed
<div class="body-wrap"><div class="top-tools"><a class="inner-link" href="#Ext.layout.FormLayout-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.layout.FormLayout-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.layout.FormLayout-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.layout.FormLayout-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.layout.FormLayout"><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.layout.ContainerLayout" ext:member="" href="output/Ext.layout.ContainerLayout.html">ContainerLayout</a><img src="resources/elbow-end.gif"/><a ext:cls="Ext.layout.AnchorLayout" ext:member="" href="output/Ext.layout.AnchorLayout.html">AnchorLayout</a><img src="resources/elbow-end.gif"/>FormLayout</pre></div><h1>Class Ext.layout.FormLayout</h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/widgets/layout/FormLayout.js" target="_blank">FormLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info">FormLayout</td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.layout.AnchorLayout" ext:member="" href="output/Ext.layout.AnchorLayout.html">AnchorLayout</a></td></tr></table><div class="description"><p>This is a layout specifically designed for creating forms.This class can be extended or created via the layout:'form' <a ext:cls="Ext.Container" ext:member="layout" href="output/Ext.Container.html#layout">Ext.Container.layout</a> config,and should generally not need to be created directly via the new keyword. However, when used in an application,it will usually be preferrable to use a <a ext:cls="Ext.form.FormPanel" href="output/Ext.form.FormPanel.html">Ext.form.FormPanel</a> (which automatically uses FormLayout as its layoutclass) since it also provides built-in functionality for loading, validating and submitting the form.</p><p>Note that when creating a layout via config, the layout-specific config properties must be passed in viathe <a ext:cls="Ext.Container" ext:member="layoutConfig" href="output/Ext.Container.html#layoutConfig">Ext.Container.layoutConfig</a> object which will then be applied internally to the layout. The containerusing the FormLayout can also supply the following form-specific config properties which will be applied by the layout:<ul><li><b>hideLabels</b>: (Boolean) True to hide field labels by default (defaults to false)</li><li><b>itemCls</b>: (String) A CSS class to add to the div wrapper that contains each field labeland field element (the default class is 'x-form-item' and itemCls will be added to that)</li><li><b>labelAlign</b>: (String) The default label alignment. The default value is empty string ''for left alignment, but specifying 'top' will align the labels above the fields.</li><li><b>labelPad</b>: (Number) The default padding in pixels for field labels (defaults to 5). labelPad onlyapplies if labelWidth is also specified, otherwise it will be ignored.</li><li><b>labelWidth</b>: (Number) The default width in pixels of field labels (defaults to 100)</li></ul></p><p>Any type of components can be added to a FormLayout, but items that inherit from <a ext:cls="Ext.form.Field" href="output/Ext.form.Field.html">Ext.form.Field</a>can also supply the following field-specific config properties:<ul><li><b>clearCls</b>: (String) The CSS class to apply to the special clearing div rendered directly after eachform field wrapper (defaults to 'x-form-clear-left')</li><li><b>fieldLabel</b>: (String) The text to display as the label for this field (defaults to '')</li><li><b>hideLabel</b>: (Boolean) True to hide the label and separator for this field (defaults to false).</li><li><b>itemCls</b>: (String) A CSS class to add to the div wrapper that contains this field labeland field element (the default class is 'x-form-item' and itemCls will be added to that). If supplied,itemCls at the field level will override the default itemCls supplied at the container level.</li><li><b>labelSeparator</b>: (String) The separator to display after the text of the label for this field(defaults to a colon ':' or the layout's value for <a ext:cls="Ext.layout.FormLayout" ext:member="labelSeparator" href="output/Ext.layout.FormLayout.html#labelSeparator">labelSeparator</a>). To hide the separator use empty string ''.</li><li><b>labelStyle</b>: (String) A CSS style specification string to add to the field label for this field(defaults to '' or the layout's value for <a ext:cls="Ext.layout.FormLayout" ext:member="labelStyle" href="output/Ext.layout.FormLayout.html#labelStyle">labelStyle</a>).</li></ul>Example usage:</p><pre><code><i>// Required <b>if</b> showing validation messages</i>Ext.QuickTips.init();<i>// While you can create a basic Panel <b>with</b> layout:<em>'form'</em>, practically</i><i>// you should usually use a FormPanel to also get its form functionality</i><i>// since it already creates a FormLayout internally.</i><b>var</b> form = <b>new</b> Ext.form.FormPanel({labelWidth: 75,title: <em>'Form Layout'</em>,bodyStyle:<em>'padding:15px'</em>,width: 350,labelPad: 10,defaultType: <em>'textfield'</em>,defaults: {<i>// applied to each contained item</i>width: 230,msgTarget: <em>'side'</em>},layoutConfig: {<i>// layout-specific configs go here</i>labelSeparator: <em>''</em>},items: [{fieldLabel: <em>'First Name'</em>,name: <em>'first'</em>,allowBlank: false},{fieldLabel: <em>'Last Name'</em>,name: <em>'last'</em>},{fieldLabel: <em>'Company'</em>,name: <em>'company'</em>},{fieldLabel: <em>'Email'</em>,name: <em>'email'</em>,vtype:<em>'email'</em>}],buttons: [{text: <em>'Save'</em>},{text: <em>'Cancel'</em>}]});</code></pre> </div><div class="hr"></div><a id="Ext.layout.FormLayout-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"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.layout.FormLayout-elementStyle"></a><b>elementStyle</b> : String <div class="mdesc">A CSS style specification string to add to each field element in this layout (defaults to ''). </div></td><td class="msource">FormLayout</td></tr><tr class="config-row inherited alt expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.layout.FormLayout-extraCls"></a><b>extraCls</b> : String <div class="mdesc"><div class="short">An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding custo...</div><div class="long">An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules. </div></div></td><td class="msource"><a ext:cls="Ext.layout.ContainerLayout" ext:member="#extraCls" href="output/Ext.layout.ContainerLayout.html#extraCls">ContainerLayout</a></td></tr><tr class="config-row expandable"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.layout.FormLayout-labelSeparator"></a><b>labelSeparator</b> : String <div class="mdesc"><div class="short">The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off separators...</div><div class="long">The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is explicitly set at the field level, those will still be displayed). </div></div></td><td class="msource">FormLayout</td></tr><tr class="config-row alt"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.layout.FormLayout-labelStyle"></a><b>labelStyle</b> : String <div class="mdesc">A CSS style specification string to add to each field label in this layout (defaults to ''). </div></td><td class="msource">FormLayout</td></tr><tr class="config-row inherited"><td class="micon"><a class="exi" href="#expand"> </a></td><td class="sig"><a id="Ext.layout.FormLayout-renderHidden"></a><b>renderHidden</b> : Boolean <div class="mdesc">True to hide each contained item on render (defaults to false). </div></td><td class="msource"><a ext:cls="Ext.layout.ContainerLayout" ext:member="#renderHidden" href="output/Ext.layout.ContainerLayout.html#renderHidden">ContainerLayout</a></td></tr></table><a id="Ext.layout.FormLayout-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div> <a id="Ext.layout.FormLayout-methods"></a><h2>Public Methods</h2><div class="no-members">This class has no public methods.</div> <a id="Ext.layout.FormLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>