source: trunk/web/addons/job_monarch/lib/extjs/docs/output/Ext.layout.FormLayout.html @ 619

        <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="../src/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 layout manager is specifically designed for rendering and managing child Components of forms.
It is responsible for rendering the labels of <a ext:cls="Ext.form.Field" href="output/Ext.form.Field.html">Field</a>s.</p>
<p>This layout manager is used when a Container is configured with the layout:'form' <a ext:cls="Ext.Container" ext:member="layout" href="output/Ext.Container.html#layout">layout</a> config,
and should generally not need to be created directly via the new keyword. In an application,
it will usually be preferrable to use a <a ext:cls="Ext.form.FormPanel" href="output/Ext.form.FormPanel.html">FormPanel</a> (which automatically uses FormLayout as its layout
class) 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 via
the <a ext:cls="Ext.Container" ext:member="layoutConfig" href="output/Ext.Container.html#layoutConfig">layoutConfig</a> object which will then be applied internally to the layout.</p>
<p>The <a ext:cls="Ext.Container" href="output/Ext.Container.html">Container</a> <i>using</i> the FormLayout can also accept the following layout-specific config
properties:
<div class="mdetail-params"><ul>
<li><b>hideLabels</b>: (Boolean)<div class="sub-desc">True to hide field labels by default (defaults to false)</div></li>
<li><b>labelAlign</b>: (String)<div class="sub-desc">The default label alignment.  The default value is empty string ''
for left alignment, but specifying 'top' will align the labels above the fields.</div></li>
<li><b>labelPad</b>: (Number)<div class="sub-desc">The default padding in pixels for field labels (defaults to 5).  labelPad only
applies if labelWidth is also specified, otherwise it will be ignored.</div></li>
<li><b>labelWidth</b>: (Number)<div class="sub-desc">The default width in pixels of field labels (defaults to 100)</div></li>
</ul></div></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:
<div class="mdetail-params"><ul>
<li><b>clearCls</b>: (String)<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each
form field wrapper (defaults to 'x-form-clear-left')</div></li>
<li><b>fieldLabel</b>: (String)<div class="sub-desc">The text to display as the label for this field (defaults to '')</div></li>
<li><b>hideLabel</b>: (Boolean)<div class="sub-desc">True to hide the label and separator for this field (defaults to false).</div></li>
<li><b>itemCls</b>: (String)<div class="sub-desc">A CSS class to add to the div wrapper that contains this field label
and 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.</div></li>
<li><b>labelSeparator</b>: (String)<div class="sub-desc">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 ''.</div></li>
<li><b>labelStyle</b>: (String)<div class="sub-desc">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>).</div></li>
</ul></div></p>
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 inherited expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</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 alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</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 inherited">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</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>