<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
</head>
|
<body onload="prettyPrint();">
|
<pre class="prettyprint lang-js"><div id="cls-Ext.layout.FormLayout"></div>/**
|
* @class Ext.layout.FormLayout
|
* @extends Ext.layout.AnchorLayout
|
* <p>This layout manager is specifically designed for rendering and managing child Components of
|
* {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
|
* {@link Ext.form.Field Field}s.</p>
|
*
|
* <p>This layout manager is used when a Container is configured with the <tt>layout:'form'</tt>
|
* {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
|
* via the new keyword. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
|
*
|
* <p>In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
|
* (which is configured with FormLayout as its layout class by default) since it also provides built-in
|
* functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.</p>
|
*
|
* <p>A {@link Ext.Container Container} <i>using</i> the FormLayout layout manager (e.g.
|
* {@link Ext.form.FormPanel} or specifying <tt>layout:'form'</tt>) can also accept the following
|
* layout-specific config properties:<div class="mdetail-params"><ul>
|
* <li><b><tt>{@link Ext.form.FormPanel#hideLabels hideLabels}</tt></b></li>
|
* <li><b><tt>{@link Ext.form.FormPanel#labelAlign labelAlign}</tt></b></li>
|
* <li><b><tt>{@link Ext.form.FormPanel#labelPad labelPad}</tt></b></li>
|
* <li><b><tt>{@link Ext.form.FormPanel#labelSeparator labelSeparator}</tt></b></li>
|
* <li><b><tt>{@link Ext.form.FormPanel#labelWidth labelWidth}</tt></b></li>
|
* </ul></div></p>
|
*
|
* <p>Any Component (including Fields) managed by FormLayout accepts the following as a config option:
|
* <div class="mdetail-params"><ul>
|
* <li><b><tt>{@link Ext.Component#anchor anchor}</tt></b></li>
|
* </ul></div></p>
|
*
|
* <p>Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
|
* configuring it with a non-null <b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b>. Components configured
|
* in this way may be configured with the following options which affect the way the FormLayout renders them:
|
* <div class="mdetail-params"><ul>
|
* <li><b><tt>{@link Ext.Component#clearCls clearCls}</tt></b></li>
|
* <li><b><tt>{@link Ext.Component#fieldLabel fieldLabel}</tt></b></li>
|
* <li><b><tt>{@link Ext.Component#hideLabel hideLabel}</tt></b></li>
|
* <li><b><tt>{@link Ext.Component#itemCls itemCls}</tt></b></li>
|
* <li><b><tt>{@link Ext.Component#labelSeparator labelSeparator}</tt></b></li>
|
* <li><b><tt>{@link Ext.Component#labelStyle labelStyle}</tt></b></li>
|
* </ul></div></p>
|
*
|
* <p>Example usage:</p>
|
* <pre><code>
|
// Required if showing validation messages
|
Ext.QuickTips.init();
|
|
// While you can create a basic Panel with layout:'form', practically
|
// you should usually use a FormPanel to also get its form functionality
|
// since it already creates a FormLayout internally.
|
var form = new Ext.form.FormPanel({
|
title: 'Form Layout',
|
bodyStyle: 'padding:15px',
|
width: 350,
|
defaultType: 'textfield',
|
defaults: {
|
// applied to each contained item
|
width: 230,
|
msgTarget: 'side'
|
},
|
items: [{
|
fieldLabel: 'First Name',
|
name: 'first',
|
allowBlank: false,
|
{@link Ext.Component#labelSeparator labelSeparator}: ':' // override labelSeparator layout config
|
},{
|
fieldLabel: 'Last Name',
|
name: 'last'
|
},{
|
fieldLabel: 'Email',
|
name: 'email',
|
vtype:'email'
|
}, {
|
xtype: 'textarea',
|
hideLabel: true, // override hideLabels layout config
|
name: 'msg',
|
anchor: '100% -53'
|
}
|
],
|
buttons: [
|
{text: 'Save'},
|
{text: 'Cancel'}
|
],
|
layoutConfig: {
|
{@link #labelSeparator}: '~' // superseded by assignment below
|
},
|
// config options applicable to container when layout='form':
|
hideLabels: false,
|
labelAlign: 'left', // or 'right' or 'top'
|
{@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
|
labelWidth: 65, // defaults to 100
|
labelPad: 8 // defaults to 5, must specify labelWidth to be honored
|
});
|
</code></pre>
|
*/
|
Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
|
|
<div id="cfg-Ext.layout.FormLayout-labelSeparator"></div>/**
|
* @cfg {String} labelSeparator
|
* See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration
|
* of this property at the <b>container</b> level takes precedence.
|
*/
|
labelSeparator : ':',
|
|
<div id="prop-Ext.layout.FormLayout-labelStyle"></div>/**
|
* Read only. The CSS style specification string added to field labels in this layout if not
|
* otherwise {@link Ext.Component#labelStyle specified by each contained field}.
|
* @type String
|
* @property labelStyle
|
*/
|
|
<div id="cfg-Ext.layout.FormLayout-trackLabels"></div>/**
|
* @cfg {Boolean} trackLabels
|
* True to show/hide the field label when the field is hidden. Defaults to <tt>false</tt>.
|
*/
|
trackLabels: false,
|
|
|
onRemove: function(c){
|
Ext.layout.FormLayout.superclass.onRemove.call(this, c);
|
if(this.trackLabels){
|
c.un('show', this.onFieldShow, this);
|
c.un('hide', this.onFieldHide, this);
|
}
|
// check for itemCt, since we may be removing a fieldset or something similar
|
var el = c.getPositionEl(),
|
ct = c.getItemCt && c.getItemCt();
|
if(c.rendered && ct){
|
if (el && el.dom) {
|
el.insertAfter(ct);
|
}
|
Ext.destroy(ct);
|
Ext.destroyMembers(c, 'label', 'itemCt');
|
if(c.customItemCt){
|
Ext.destroyMembers(c, 'getItemCt', 'customItemCt');
|
}
|
}
|
},
|
|
// private
|
setContainer : function(ct){
|
Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
|
if(ct.labelAlign){
|
ct.addClass('x-form-label-'+ct.labelAlign);
|
}
|
|
if(ct.hideLabels){
|
Ext.apply(this, {
|
labelStyle: 'display:none',
|
elementStyle: 'padding-left:0;',
|
labelAdjust: 0
|
});
|
}else{
|
this.labelSeparator = ct.labelSeparator || this.labelSeparator;
|
ct.labelWidth = ct.labelWidth || 100;
|
if(Ext.isNumber(ct.labelWidth)){
|
var pad = Ext.isNumber(ct.labelPad) ? ct.labelPad : 5;
|
Ext.apply(this, {
|
labelAdjust: ct.labelWidth + pad,
|
labelStyle: 'width:' + ct.labelWidth + 'px;',
|
elementStyle: 'padding-left:' + (ct.labelWidth + pad) + 'px'
|
});
|
}
|
if(ct.labelAlign == 'top'){
|
Ext.apply(this, {
|
labelStyle: 'width:auto;',
|
labelAdjust: 0,
|
elementStyle: 'padding-left:0;'
|
});
|
}
|
}
|
},
|
|
// private
|
isHide: function(c){
|
return c.hideLabel || this.container.hideLabels;
|
},
|
|
onFieldShow: function(c){
|
c.getItemCt().removeClass('x-hide-' + c.hideMode);
|
},
|
|
onFieldHide: function(c){
|
c.getItemCt().addClass('x-hide-' + c.hideMode);
|
},
|
|
//private
|
getLabelStyle: function(s){
|
var ls = '', items = [this.labelStyle, s];
|
for (var i = 0, len = items.length; i < len; ++i){
|
if (items[i]){
|
ls += items[i];
|
if (ls.substr(-1, 1) != ';'){
|
ls += ';'
|
}
|
}
|
}
|
return ls;
|
},
|
|
<div id="cfg-Ext.layout.FormLayout-fieldTpl"></div>/**
|
* @cfg {Ext.Template} fieldTpl
|
* A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
|
* the fully wrapped, labeled and styled form Field. Defaults to:</p><pre><code>
|
new Ext.Template(
|
'<div class="x-form-item {itemCls}" tabIndex="-1">',
|
'<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
|
'<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
|
'</div><div class="{clearCls}"></div>',
|
'</div>'
|
);
|
</code></pre>
|
* <p>This may be specified to produce a different DOM structure when rendering form Fields.</p>
|
* <p>A description of the properties within the template follows:</p><div class="mdetail-params"><ul>
|
* <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
|
* that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
|
* will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
|
* supplied at the container level.</div></li>
|
* <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
|
* <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
|
* A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
|
* {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
|
* <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
|
* field (defaults to <tt>''</tt>)</div></li>
|
* <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
|
* the text of the label for this field (defaults to a colon <tt>':'</tt> or the
|
* {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
|
* <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
|
* <li><b><tt>clearCls</tt></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 <tt>'x-form-clear-left'</tt>)</div></li>
|
* </ul></div>
|
* <p>Also see <tt>{@link #getTemplateArgs}</tt></p>
|
*/
|
|
// private
|
renderItem : function(c, position, target){
|
if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
|
var args = this.getTemplateArgs(c);
|
if(Ext.isNumber(position)){
|
position = target.dom.childNodes[position] || null;
|
}
|
if(position){
|
c.itemCt = this.fieldTpl.insertBefore(position, args, true);
|
}else{
|
c.itemCt = this.fieldTpl.append(target, args, true);
|
}
|
if(!c.getItemCt){
|
// Non form fields don't have getItemCt, apply it here
|
// This will get cleaned up in onRemove
|
Ext.apply(c, {
|
getItemCt: function(){
|
return c.itemCt;
|
},
|
customItemCt: true
|
});
|
}
|
c.label = c.getItemCt().child('label.x-form-item-label');
|
if(!c.rendered){
|
c.render('x-form-el-' + c.id);
|
}else if(!this.isValidParent(c, target)){
|
Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
|
}
|
if(this.trackLabels){
|
if(c.hidden){
|
this.onFieldHide(c);
|
}
|
c.on({
|
scope: this,
|
show: this.onFieldShow,
|
hide: this.onFieldHide
|
});
|
}
|
this.configureItem(c);
|
}else {
|
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
|
}
|
},
|
|
<div id="method-Ext.layout.FormLayout-getTemplateArgs"></div>/**
|
* <p>Provides template arguments for rendering the fully wrapped, labeled and styled form Field.</p>
|
* <p>This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
|
* to create a correctly wrapped, labeled and styled form Field. This may be overriden to
|
* create custom layouts. The properties which must be returned are:</p><div class="mdetail-params"><ul>
|
* <li><b><tt>itemCls</tt></b> : String<div class="sub-desc">The CSS class applied to the outermost div wrapper
|
* that contains this field label and field element (the default class is <tt>'x-form-item'</tt> and <tt>itemCls</tt>
|
* will be added to that). If supplied, <tt>itemCls</tt> at the field level will override the default <tt>itemCls</tt>
|
* supplied at the container level.</div></li>
|
* <li><b><tt>id</tt></b> : String<div class="sub-desc">The id of the Field</div></li>
|
* <li><b><tt>{@link #labelStyle}</tt></b> : String<div class="sub-desc">
|
* A CSS style specification string to add to the field label for this field (defaults to <tt>''</tt> or the
|
* {@link #labelStyle layout's value for <tt>labelStyle</tt>}).</div></li>
|
* <li><b><tt>label</tt></b> : String<div class="sub-desc">The text to display as the label for this
|
* field (defaults to <tt>''</tt>)</div></li>
|
* <li><b><tt>{@link #labelSeparator}</tt></b> : String<div class="sub-desc">The separator to display after
|
* the text of the label for this field (defaults to a colon <tt>':'</tt> or the
|
* {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.</div></li>
|
* <li><b><tt>elementStyle</tt></b> : String<div class="sub-desc">The styles text for the input element's wrapper.</div></li>
|
* <li><b><tt>clearCls</tt></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 <tt>'x-form-clear-left'</tt>)</div></li>
|
* </ul></div>
|
* @param (Ext.form.Field} field The {@link Ext.form.Field Field} being rendered.
|
* @return An object hash containing the properties required to render the Field.
|
*/
|
getTemplateArgs: function(field) {
|
var noLabelSep = !field.fieldLabel || field.hideLabel;
|
return {
|
id: field.id,
|
label: field.fieldLabel,
|
labelStyle: this.getLabelStyle(field.labelStyle),
|
elementStyle: this.elementStyle||'',
|
labelSeparator: noLabelSep ? '' : (Ext.isDefined(field.labelSeparator) ? field.labelSeparator : this.labelSeparator),
|
itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
|
clearCls: field.clearCls || 'x-form-clear-left'
|
};
|
},
|
|
// private
|
adjustWidthAnchor: function(value, c){
|
if(c.label && !this.isHide(c) && (this.container.labelAlign != 'top')){
|
var adjust = Ext.isIE6 || (Ext.isIE && !Ext.isStrict);
|
return value - this.labelAdjust + (adjust ? -3 : 0);
|
}
|
return value;
|
},
|
|
adjustHeightAnchor : function(value, c){
|
if(c.label && !this.isHide(c) && (this.container.labelAlign == 'top')){
|
return value - c.label.getHeight();
|
}
|
return value;
|
},
|
|
// private
|
isValidParent : function(c, target){
|
return target && this.container.getEl().contains(c.getPositionEl());
|
}
|
|
<div id="prop-Ext.layout.FormLayout-activeItem"></div>/**
|
* @property activeItem
|
* @hide
|
*/
|
});
|
|
Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
|
</pre>
|
</body>
|
</html>
|
