1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.layout.FormLayout |
---|
11 | * @extends Ext.layout.AnchorLayout |
---|
12 | * <p>This layout manager is specifically designed for rendering and managing child Components of forms. |
---|
13 | * It is responsible for rendering the labels of {@link Ext.form.Field Field}s.</p> |
---|
14 | * <p>This layout manager is used when a Container is configured with the layout:'form' {@link Ext.Container#layout layout} config, |
---|
15 | * and should generally not need to be created directly via the new keyword. In an application, |
---|
16 | * it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel} (which automatically uses FormLayout as its layout |
---|
17 | * class) since it also provides built-in functionality for loading, validating and submitting the form.</p> |
---|
18 | * <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via |
---|
19 | * the {@link Ext.Container#layoutConfig layoutConfig} object which will then be applied internally to the layout.</p> |
---|
20 | * <p>The {@link Ext.Container Container} <i>using</i> the FormLayout can also accept the following layout-specific config |
---|
21 | * properties: |
---|
22 | * <div class="mdetail-params"><ul> |
---|
23 | * <li><b>hideLabels</b>: (Boolean)<div class="sub-desc">True to hide field labels by default (defaults to false)</div></li> |
---|
24 | * <li><b>labelAlign</b>: (String)<div class="sub-desc">The default label alignment. The default value is empty string '' |
---|
25 | * for left alignment, but specifying 'top' will align the labels above the fields.</div></li> |
---|
26 | * <li><b>labelPad</b>: (Number)<div class="sub-desc">The default padding in pixels for field labels (defaults to 5). labelPad only |
---|
27 | * applies if labelWidth is also specified, otherwise it will be ignored.</div></li> |
---|
28 | * <li><b>labelWidth</b>: (Number)<div class="sub-desc">The default width in pixels of field labels (defaults to 100)</div></li> |
---|
29 | * </ul></div></p> |
---|
30 | * <p>Any type of components can be added to a FormLayout, but items that inherit from {@link Ext.form.Field} |
---|
31 | * can also supply the following field-specific config properties: |
---|
32 | * <div class="mdetail-params"><ul> |
---|
33 | * <li><b>clearCls</b>: (String)<div class="sub-desc">The CSS class to apply to the special clearing div rendered directly after each |
---|
34 | * form field wrapper (defaults to 'x-form-clear-left')</div></li> |
---|
35 | * <li><b>fieldLabel</b>: (String)<div class="sub-desc">The text to display as the label for this field (defaults to '')</div></li> |
---|
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> |
---|
37 | * <li><b>itemCls</b>: (String)<div class="sub-desc">A CSS class to add to the div wrapper that contains this field label |
---|
38 | * and field element (the default class is 'x-form-item' and itemCls will be added to that). If supplied, |
---|
39 | * itemCls at the field level will override the default itemCls supplied at the container level.</div></li> |
---|
40 | * <li><b>labelSeparator</b>: (String)<div class="sub-desc">The separator to display after the text of the label for this field |
---|
41 | * (defaults to a colon ':' or the layout's value for {@link #labelSeparator}). To hide the separator use empty string ''.</div></li> |
---|
42 | * <li><b>labelStyle</b>: (String)<div class="sub-desc">A CSS style specification string to add to the field label for this field |
---|
43 | * (defaults to '' or the layout's value for {@link #labelStyle}).</div></li> |
---|
44 | * </ul></div></p> |
---|
45 | * Example usage:</p> |
---|
46 | * <pre><code> |
---|
47 | // Required if showing validation messages |
---|
48 | Ext.QuickTips.init(); |
---|
49 | |
---|
50 | // While you can create a basic Panel with layout:'form', practically |
---|
51 | // you should usually use a FormPanel to also get its form functionality |
---|
52 | // since it already creates a FormLayout internally. |
---|
53 | var form = new Ext.form.FormPanel({ |
---|
54 | labelWidth: 75, |
---|
55 | title: 'Form Layout', |
---|
56 | bodyStyle:'padding:15px', |
---|
57 | width: 350, |
---|
58 | labelPad: 10, |
---|
59 | defaultType: 'textfield', |
---|
60 | defaults: { |
---|
61 | // applied to each contained item |
---|
62 | width: 230, |
---|
63 | msgTarget: 'side' |
---|
64 | }, |
---|
65 | layoutConfig: { |
---|
66 | // layout-specific configs go here |
---|
67 | labelSeparator: '' |
---|
68 | }, |
---|
69 | items: [{ |
---|
70 | fieldLabel: 'First Name', |
---|
71 | name: 'first', |
---|
72 | allowBlank: false |
---|
73 | },{ |
---|
74 | fieldLabel: 'Last Name', |
---|
75 | name: 'last' |
---|
76 | },{ |
---|
77 | fieldLabel: 'Company', |
---|
78 | name: 'company' |
---|
79 | },{ |
---|
80 | fieldLabel: 'Email', |
---|
81 | name: 'email', |
---|
82 | vtype:'email' |
---|
83 | } |
---|
84 | ], |
---|
85 | buttons: [{ |
---|
86 | text: 'Save' |
---|
87 | },{ |
---|
88 | text: 'Cancel' |
---|
89 | }] |
---|
90 | }); |
---|
91 | </code></pre> |
---|
92 | */ |
---|
93 | Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, { |
---|
94 | /** |
---|
95 | * @cfg {String} labelSeparator |
---|
96 | * The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off |
---|
97 | * separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is |
---|
98 | * explicitly set at the field level, those will still be displayed). |
---|
99 | */ |
---|
100 | labelSeparator : ':', |
---|
101 | |
---|
102 | // private |
---|
103 | getAnchorViewSize : function(ct, target){ |
---|
104 | return (ct.body||ct.el).getStyleSize(); |
---|
105 | }, |
---|
106 | |
---|
107 | // private |
---|
108 | setContainer : function(ct){ |
---|
109 | Ext.layout.FormLayout.superclass.setContainer.call(this, ct); |
---|
110 | |
---|
111 | if(ct.labelAlign){ |
---|
112 | ct.addClass('x-form-label-'+ct.labelAlign); |
---|
113 | } |
---|
114 | |
---|
115 | if(ct.hideLabels){ |
---|
116 | this.labelStyle = "display:none"; |
---|
117 | this.elementStyle = "padding-left:0;"; |
---|
118 | this.labelAdjust = 0; |
---|
119 | }else{ |
---|
120 | this.labelSeparator = ct.labelSeparator || this.labelSeparator; |
---|
121 | ct.labelWidth = ct.labelWidth || 100; |
---|
122 | if(typeof ct.labelWidth == 'number'){ |
---|
123 | var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5); |
---|
124 | this.labelAdjust = ct.labelWidth+pad; |
---|
125 | this.labelStyle = "width:"+ct.labelWidth+"px;"; |
---|
126 | this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px'; |
---|
127 | } |
---|
128 | if(ct.labelAlign == 'top'){ |
---|
129 | this.labelStyle = "width:auto;"; |
---|
130 | this.labelAdjust = 0; |
---|
131 | this.elementStyle = "padding-left:0;"; |
---|
132 | } |
---|
133 | } |
---|
134 | |
---|
135 | if(!this.fieldTpl){ |
---|
136 | // the default field template used by all form layouts |
---|
137 | var t = new Ext.Template( |
---|
138 | '<div class="x-form-item {5}" tabIndex="-1">', |
---|
139 | '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>', |
---|
140 | '<div class="x-form-element" id="x-form-el-{0}" style="{3}">', |
---|
141 | '</div><div class="{6}"></div>', |
---|
142 | '</div>' |
---|
143 | ); |
---|
144 | t.disableFormats = true; |
---|
145 | t.compile(); |
---|
146 | Ext.layout.FormLayout.prototype.fieldTpl = t; |
---|
147 | } |
---|
148 | }, |
---|
149 | |
---|
150 | //private |
---|
151 | getLabelStyle: function(s){ |
---|
152 | var ls = '', items = [this.labelStyle, s]; |
---|
153 | for (var i = 0, len = items.length; i < len; ++i){ |
---|
154 | if (items[i]){ |
---|
155 | ls += items[i]; |
---|
156 | if (ls.substr(-1, 1) != ';'){ |
---|
157 | ls += ';' |
---|
158 | } |
---|
159 | } |
---|
160 | } |
---|
161 | return ls; |
---|
162 | }, |
---|
163 | |
---|
164 | // private |
---|
165 | renderItem : function(c, position, target){ |
---|
166 | if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){ |
---|
167 | var args = [ |
---|
168 | c.id, c.fieldLabel, |
---|
169 | this.getLabelStyle(c.labelStyle), |
---|
170 | this.elementStyle||'', |
---|
171 | typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator, |
---|
172 | (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''), |
---|
173 | c.clearCls || 'x-form-clear-left' |
---|
174 | ]; |
---|
175 | if(typeof position == 'number'){ |
---|
176 | position = target.dom.childNodes[position] || null; |
---|
177 | } |
---|
178 | if(position){ |
---|
179 | this.fieldTpl.insertBefore(position, args); |
---|
180 | }else{ |
---|
181 | this.fieldTpl.append(target, args); |
---|
182 | } |
---|
183 | c.render('x-form-el-'+c.id); |
---|
184 | }else { |
---|
185 | Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments); |
---|
186 | } |
---|
187 | }, |
---|
188 | |
---|
189 | // private |
---|
190 | adjustWidthAnchor : function(value, comp){ |
---|
191 | return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.labelAdjust) : 0); |
---|
192 | }, |
---|
193 | |
---|
194 | // private |
---|
195 | isValidParent : function(c, target){ |
---|
196 | return true; |
---|
197 | } |
---|
198 | |
---|
199 | /** |
---|
200 | * @property activeItem |
---|
201 | * @hide |
---|
202 | */ |
---|
203 | }); |
---|
204 | |
---|
205 | Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout; |
---|