3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>The source code</title>
5 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8 <body onload="prettyPrint();">
9 <pre class="prettyprint lang-js">/*!
10 * Ext JS Library 3.2.0
11 * Copyright(c) 2006-2010 Ext JS, Inc.
13 * http://www.extjs.com/license
15 <div id="cls-Ext.layout.FormLayout"></div>/**
16 * @class Ext.layout.FormLayout
17 * @extends Ext.layout.AnchorLayout
18 * <p>This layout manager is specifically designed for rendering and managing child Components of
19 * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
20 * {@link Ext.form.Field Field}s.</p>
22 * <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt>
23 * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
24 * via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
26 * <p>In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
27 * (which is configured with FormLayout as its layout class by default) since it also provides built-in
28 * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.</p>
30 * <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g.
31 * {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following
32 * layout-specific config properties:<div class="mdetail-params"><ul>
33 * <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li>
34 * <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li>
35 * <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li>
36 * <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li>
37 * <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li>
40 * <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:
41 * <div class="mdetail-params"><ul>
42 * <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li>
45 * <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
46 * configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured
47 * in this way may be configured with the following options which affect the way the FormLayout renders them:
48 * <div class="mdetail-params"><ul>
49 * <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li>
50 * <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li>
51 * <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li>
52 * <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li>
53 * <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li>
54 * <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li>
57 * <p>Example usage:</p>
59 // Required if showing validation messages
62 // While you can create a basic Panel with layout:'form', practically
63 // you should usually use a FormPanel to also get its form functionality
64 // since it already creates a FormLayout internally.
65 var form = new Ext.form.FormPanel({
67 bodyStyle: 'padding:15px',
69 defaultType: 'textfield',
71 // applied to each contained item
76 fieldLabel: 'First Name',
79 {@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
81 fieldLabel: 'Last Name',
89 hideLabel: true, // override hideLabels layout config
99 {@link #labelSeparator}: '~' // superseded by assignment below
101 // config options applicable to container when layout='form':
103 labelAlign: 'left', // or 'right' or 'top'
104 {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
105 labelWidth: 65, // defaults to 100
106 labelPad: 8 // defaults to 5, must specify labelWidth to be honored
110 Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
112 <div id="cfg-Ext.layout.FormLayout-labelSeparator"></div>/**
113 * @cfg {String} labelSeparator
114 * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration
115 * of this property at the <b>container</b> level takes precedence.
117 labelSeparator : ':',
119 <div id="prop-Ext.layout.FormLayout-labelStyle"></div>/**
120 * Read only. The CSS style specification string added to field labels in this layout if not
121 * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
123 * @property labelStyle
126 <div id="cfg-Ext.layout.FormLayout-trackLabels"></div>/**
127 * @cfg {Boolean} trackLabels
128 * True to show/hide the field label when the field is hidden. Defaults to <tt>false</tt>.
134 onRemove: function(c){
135 Ext.layout.FormLayout.superclass.onRemove.call(this, c);
136 if(this.trackLabels){
137 c.un('show', this.onFieldShow, this);
138 c.un('hide', this.onFieldHide, this);
140 // check for itemCt, since we may be removing a fieldset or something similar
141 var el = c.getPositionEl(),
142 ct = c.getItemCt && c.getItemCt();
143 if (c.rendered && ct) {
148 Ext.destroyMembers(c, 'label', 'itemCt');
149 if (c.customItemCt) {
150 Ext.destroyMembers(c, 'getItemCt', 'customItemCt');
156 setContainer : function(ct){
157 Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
159 ct.addClass('x-form-label-'+ct.labelAlign);
164 labelStyle: 'display:none',
165 elementStyle: 'padding-left:0;',
169 this.labelSeparator = ct.labelSeparator || this.labelSeparator;
170 ct.labelWidth = ct.labelWidth || 100;
171 if(Ext.isNumber(ct.labelWidth)){
172 var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5;
174 labelAdjust: ct.labelWidth + pad,
175 labelStyle: 'width:' + ct.labelWidth + 'px;',
176 elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px'
179 if(ct.labelAlign == 'top'){
181 labelStyle: 'width:auto;',
183 elementStyle: 'padding-left:0;'
191 return c.hideLabel || this.container.hideLabels;
194 onFieldShow: function(c){
195 c.getItemCt().removeClass('x-hide-' + c.hideMode);
198 onFieldHide: function(c){
199 c.getItemCt().addClass('x-hide-' + c.hideMode);
203 getLabelStyle: function(s){
204 var ls = '', items = [this.labelStyle, s];
205 for (var i = 0, len = items.length; i < len; ++i){
208 if (ls.substr(-1, 1) != ';'){
216 <div id="cfg-Ext.layout.FormLayout-fieldTpl"></div>/**
217 * @cfg {Ext.Template} fieldTpl
218 * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
219 * the fully wrapped, labeled and styled form Field. Defaults to:</p><pre><code>
221 '<div class="x-form-item {itemCls}" tabIndex="-1">',
222 '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
223 '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
224 '</div><div class="{clearCls}"></div>',
228 * <p>This may be specified to produce a different DOM structure when rendering form Fields.</p>
229 * <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul>
230 * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
231 * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
232 * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
233 * supplied at the container level.</div></li>
234 * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
235 * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
236 * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
237 * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
238 * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
239 * field (defaults to <tt>''</tt>)</div></li>
240 * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
241 * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
242 * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
243 * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
244 * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
245 * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
247 * <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
254 renderItem : function(c, position, target){
255 if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
256 var args = this.getTemplateArgs(c);
257 if(Ext.isNumber(position)){
258 position = target.dom.childNodes[position] || null;
261 c.itemCt = this.fieldTpl.insertBefore(position, args, true);
263 c.itemCt = this.fieldTpl.append(target, args, true);
266 // Non form fields don't have getItemCt, apply it here
267 // This will get cleaned up in onRemove
269 getItemCt: function(){
275 c.label = c.getItemCt().child('label.x-form-item-label');
277 c.render('x-form-el-' + c.id);
278 }else if(!this.isValidParent(c, target)){
279 Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
281 if(this.trackLabels){
287 show: this.onFieldShow,
288 hide: this.onFieldHide
291 this.configureItem(c);
293 Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
297 <div id="method-Ext.layout.FormLayout-getTemplateArgs"></div>/**
298 * <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p>
299 * <p>This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
300 * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
301 * create custom layouts. The properties which must be returned are:</p><div class="mdetail-params"><ul>
302 * <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
303 * that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
304 * will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
305 * supplied at the container level.</div></li>
306 * <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
307 * <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
308 * A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
309 * {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
310 * <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
311 * field (defaults to the field's configured fieldLabel property)</div></li>
312 * <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
313 * the text of the label for this field (defaults to a colon <tt>':'</tt> or the
314 * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
315 * <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
316 * <li><b><tt>clearCls</tt></b> : String<div class="sub-desc">The CSS class to apply to the special clearing div
317 * rendered directly after each form field wrapper (defaults to <tt>'x-form-clear-left'</tt>)</div></li>
319 * @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
320 * @return {Object} An object hash containing the properties required to render the Field.
322 getTemplateArgs: function(field) {
323 var noLabelSep = !field.fieldLabel || field.hideLabel;
327 label : field.fieldLabel,
328 itemCls : (field.itemCls || this.container.itemCls || '') + (field.hideLabel ? ' x-hide-label' : ''),
329 clearCls : field.clearCls || 'x-form-clear-left',
330 labelStyle : this.getLabelStyle(field.labelStyle),
331 elementStyle : this.elementStyle || '',
332 labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator)
337 adjustWidthAnchor: function(value, c){
338 if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
339 var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
340 return value - this.labelAdjust + (adjust ? -3 : 0);
345 adjustHeightAnchor : function(value, c){
346 if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){
347 return value - c.label.getHeight();
353 isValidParent : function(c, target){
354 return target && this.container.getEl().contains(c.getPositionEl());
357 <div id="prop-Ext.layout.FormLayout-activeItem"></div>/**
358 * @property activeItem
363 Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;