2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.layout.FormLayout
\r
11 * @extends Ext.layout.AnchorLayout
\r
12 * <p>This layout manager is specifically designed for rendering and managing child Components of forms.
\r
13 * It is responsible for rendering the labels of {@link Ext.form.Field Field}s.</p>
\r
14 * <p>This layout manager is used when a Container is configured with the layout:'form' {@link Ext.Container#layout layout} config,
\r
15 * and should generally not need to be created directly via the new keyword. In an application,
\r
16 * it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} (which automatically uses FormLayout as its layout
\r
17 * class) since it also provides built-in functionality for loading, validating and submitting the form.</p>
\r
18 * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
\r
19 * the {@link Ext.Container#layoutConfig layoutConfig} object which will then be applied internally to the layout.</p>
\r
20 * <p>The {@link Ext.Container Container} <i>using</i> the FormLayout can also accept the following layout-specific config
\r
22 * <div class="mdetail-params"><ul>
\r
23 * <li><b>hideLabels</b>: (Boolean)<div class="sub-desc">True to hide field labels by default (defaults to false)</div></li>
\r
24 * <li><b>labelAlign</b>: (String)<div class="sub-desc">The default label alignment. The default value is empty string ''
\r
25 * for left alignment, but specifying 'top' will align the labels above the fields.</div></li>
\r
26 * <li><b>labelPad</b>: (Number)<div class="sub-desc">The default padding in pixels for field labels (defaults to 5). labelPad only
\r
27 * applies if labelWidth is also specified, otherwise it will be ignored.</div></li>
\r
28 * <li><b>labelWidth</b>: (Number)<div class="sub-desc">The default width in pixels of field labels (defaults to 100)</div></li>
\r
30 * <p>Any type of components can be added to a FormLayout, but items that inherit from {@link Ext.form.Field}
\r
31 * can also supply the following field-specific config properties:
\r
32 * <div class="mdetail-params"><ul>
\r
33 * <li><b>clearCls</b>: (String)<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each
\r
34 * form field wrapper (defaults to 'x-form-clear-left')</div></li>
\r
35 * <li><b>fieldLabel</b>: (String)<div class="sub-desc">The text to display as the label for this field (defaults to '')</div></li>
\r
36 * <li><b>hideLabel</b>: (Boolean)<div class="sub-desc">True to hide the label and separator for this field (defaults to false).</div></li>
\r
37 * <li><b>itemCls</b>: (String)<div class="sub-desc">A CSS class to add to the div wrapper that contains this field label
\r
38 * and field element (the default class is 'x-form-item' and itemCls will be added to that). If supplied,
\r
39 * itemCls at the field level will override the default itemCls supplied at the container level.</div></li>
\r
40 * <li><b>labelSeparator</b>: (String)<div class="sub-desc">The separator to display after the text of the label for this field
\r
41 * (defaults to a colon ':' or the layout's value for {@link #labelSeparator}). To hide the separator use empty string ''.</div></li>
\r
42 * <li><b>labelStyle</b>: (String)<div class="sub-desc">A CSS style specification string to add to the field label for this field
\r
43 * (defaults to '' or the layout's value for {@link #labelStyle}).</div></li>
\r
45 * Example usage:</p>
\r
47 // Required if showing validation messages
\r
48 Ext.QuickTips.init();
\r
50 // While you can create a basic Panel with layout:'form', practically
\r
51 // you should usually use a FormPanel to also get its form functionality
\r
52 // since it already creates a FormLayout internally.
\r
53 var form = new Ext.form.FormPanel({
\r
55 title: 'Form Layout',
\r
56 bodyStyle:'padding:15px',
\r
59 defaultType: 'textfield',
\r
61 // applied to each contained item
\r
66 // layout-specific configs go here
\r
70 fieldLabel: 'First Name',
\r
74 fieldLabel: 'Last Name',
\r
77 fieldLabel: 'Company',
\r
80 fieldLabel: 'Email',
\r
93 Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
\r
95 * @cfg {String} labelSeparator
\r
96 * The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off
\r
97 * separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is
\r
98 * explicitly set at the field level, those will still be displayed).
\r
100 labelSeparator : ':',
\r
103 getAnchorViewSize : function(ct, target){
\r
104 return (ct.body||ct.el).getStyleSize();
\r
108 setContainer : function(ct){
\r
109 Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
\r
112 ct.addClass('x-form-label-'+ct.labelAlign);
\r
116 this.labelStyle = "display:none";
\r
117 this.elementStyle = "padding-left:0;";
\r
118 this.labelAdjust = 0;
\r
120 this.labelSeparator = ct.labelSeparator || this.labelSeparator;
\r
121 ct.labelWidth = ct.labelWidth || 100;
\r
122 if(typeof ct.labelWidth == 'number'){
\r
123 var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
\r
124 this.labelAdjust = ct.labelWidth+pad;
\r
125 this.labelStyle = "width:"+ct.labelWidth+"px;";
\r
126 this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
\r
128 if(ct.labelAlign == 'top'){
\r
129 this.labelStyle = "width:auto;";
\r
130 this.labelAdjust = 0;
\r
131 this.elementStyle = "padding-left:0;";
\r
135 if(!this.fieldTpl){
\r
136 // the default field template used by all form layouts
\r
137 var t = new Ext.Template(
\r
138 '<div class="x-form-item {5}" tabIndex="-1">',
\r
139 '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
\r
140 '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
\r
141 '</div><div class="{6}"></div>',
\r
144 t.disableFormats = true;
\r
146 Ext.layout.FormLayout.prototype.fieldTpl = t;
\r
151 getLabelStyle: function(s){
\r
152 var ls = '', items = [this.labelStyle, s];
\r
153 for (var i = 0, len = items.length; i < len; ++i){
\r
156 if (ls.substr(-1, 1) != ';'){
\r
165 renderItem : function(c, position, target){
\r
166 if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
\r
168 c.id, c.fieldLabel,
\r
169 this.getLabelStyle(c.labelStyle),
\r
170 this.elementStyle||'',
\r
171 typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
\r
172 (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
\r
173 c.clearCls || 'x-form-clear-left'
\r
175 if(typeof position == 'number'){
\r
176 position = target.dom.childNodes[position] || null;
\r
179 this.fieldTpl.insertBefore(position, args);
\r
181 this.fieldTpl.append(target, args);
\r
183 c.render('x-form-el-'+c.id);
\r
185 Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
\r
190 adjustWidthAnchor : function(value, comp){
\r
191 return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
\r
195 isValidParent : function(c, target){
\r
200 * @property activeItem
\r
205 Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;