/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ /** * @class Ext.layout.FormLayout * @extends Ext.layout.AnchorLayout *
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.
* *This layout manager is used when a Container is configured with the layout:'form' * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly * via the new keyword. See {@link Ext.Container#layout} for additional details.
* *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.
* *A {@link Ext.Container Container} using the FormLayout layout manager (e.g. * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following * layout-specific config properties:
Any Component (including Fields) managed by FormLayout accepts the following as a config option: *
Any Component managed by FormLayout may be rendered as a form field (with an associated label) by * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured * in this way may be configured with the following options which affect the way the FormLayout renders them: *
Example usage:
*
// 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
});
*/
Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {
/**
* @cfg {String} labelSeparator
* See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}. Configuration
* of this property at the container level takes precedence.
*/
labelSeparator : ':',
/**
* 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
*/
/**
* @cfg {Boolean} trackLabels
* True to show/hide the field label when the field is hidden. Defaults to true.
*/
trackLabels: true,
type: 'form',
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 = Ext.isDefined(ct.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);
// Composite fields will need to layout after the container is made visible
if (c.isComposite) {
c.doLayout();
}
},
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;
},
/**
* @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:
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>'
);
* This may be specified to produce a different DOM structure when rendering form Fields.
*A description of the properties within the template follows:
Also see {@link #getTemplateArgs}
*/ /** * @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); } }, /** *Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
*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: