/**
* @class Ext.form.FieldSet
* @extends Ext.Panel
* Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
*
var form = new Ext.FormPanel({
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 700,
renderTo: document.body,
layout:'column', // arrange items in columns
defaults: { // defaults applied to items
layout: 'form',
border: false,
bodyStyle: 'padding:4px'
},
items: [{
// Fieldset in Column 1
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
autoHeight:true,
defaults: {
anchor: '-20' // leave room for error icon
},
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
},{
// Fieldset in Column 2 - Panel inside
xtype:'fieldset',
title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
autoHeight:true,
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 100
}]
}]
});
*
* @constructor
* @param {Object} config Configuration options
* @xtype fieldset
*/
Ext.form.FieldSet = Ext.extend(Ext.Panel, {
/**
* @cfg {Mixed} checkboxToggle true to render a checkbox into the fieldset frame just
* in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
* to false).
* A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
* If true is specified, the default DomHelper config object used to create the element
* is:
* {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
*
*/
/**
* @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
* (defaults to '[checkbox id]-checkbox').
*/
/**
* @cfg {Boolean} collapsible
* true to make the fieldset collapsible and have the expand/collapse toggle button automatically
* rendered into the legend element, false to keep the fieldset statically sized with no collapse
* button (defaults to false). Another option is to configure {@link #checkboxToggle}.
*/
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
/**
* @cfg {String} itemCls A css class to apply to the x-form-item of fields (see
* {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
* This property cascades to child containers.
*/
/**
* @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').
*/
baseCls : 'x-fieldset',
/**
* @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').
*/
layout : 'form',
/**
* @cfg {Boolean} animCollapse
* true to animate the transition when the panel is collapsed, false to skip the
* animation (defaults to false).
*/
animCollapse : false,
// private
onRender : function(ct, position){
if(!this.el){
this.el = document.createElement('fieldset');
this.el.id = this.id;
if (this.title || this.header || this.checkboxToggle) {
this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';
}
}
Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
if(this.checkboxToggle){
var o = typeof this.checkboxToggle == 'object' ?
this.checkboxToggle :
{tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
this.checkbox = this.header.insertFirst(o);
this.checkbox.dom.checked = !this.collapsed;
this.mon(this.checkbox, 'click', this.onCheckClick, this);
}
},
// private
onCollapse : function(doAnim, animArg){
if(this.checkbox){
this.checkbox.dom.checked = false;
}
Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
},
// private
onExpand : function(doAnim, animArg){
if(this.checkbox){
this.checkbox.dom.checked = true;
}
Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
},
/**
* This function is called by the fieldset's checkbox when it is toggled (only applies when
* checkboxToggle = true). This method should never be called externally, but can be
* overridden to provide custom behavior when the checkbox is toggled if needed.
*/
onCheckClick : function(){
this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
}
/**
* @cfg {String/Number} activeItem
* @hide
*/
/**
* @cfg {Mixed} applyTo
* @hide
*/
/**
* @cfg {Boolean} bodyBorder
* @hide
*/
/**
* @cfg {Boolean} border
* @hide
*/
/**
* @cfg {Boolean/Number} bufferResize
* @hide
*/
/**
* @cfg {Boolean} collapseFirst
* @hide
*/
/**
* @cfg {String} defaultType
* @hide
*/
/**
* @cfg {String} disabledClass
* @hide
*/
/**
* @cfg {String} elements
* @hide
*/
/**
* @cfg {Boolean} floating
* @hide
*/
/**
* @cfg {Boolean} footer
* @hide
*/
/**
* @cfg {Boolean} frame
* @hide
*/
/**
* @cfg {Boolean} header
* @hide
*/
/**
* @cfg {Boolean} headerAsText
* @hide
*/
/**
* @cfg {Boolean} hideCollapseTool
* @hide
*/
/**
* @cfg {String} iconCls
* @hide
*/
/**
* @cfg {Boolean/String} shadow
* @hide
*/
/**
* @cfg {Number} shadowOffset
* @hide
*/
/**
* @cfg {Boolean} shim
* @hide
*/
/**
* @cfg {Object/Array} tbar
* @hide
*/
/**
* @cfg {String} tabTip
* @hide
*/
/**
* @cfg {Boolean} titleCollapse
* @hide
*/
/**
* @cfg {Array} tools
* @hide
*/
/**
* @cfg {Ext.Template/Ext.XTemplate} toolTemplate
* @hide
*/
/**
* @cfg {String} xtype
* @hide
*/
/**
* @property header
* @hide
*/
/**
* @property footer
* @hide
*/
/**
* @method focus
* @hide
*/
/**
* @method getBottomToolbar
* @hide
*/
/**
* @method getTopToolbar
* @hide
*/
/**
* @method setIconClass
* @hide
*/
/**
* @event activate
* @hide
*/
/**
* @event beforeclose
* @hide
*/
/**
* @event bodyresize
* @hide
*/
/**
* @event close
* @hide
*/
/**
* @event deactivate
* @hide
*/
});
Ext.reg('fieldset', Ext.form.FieldSet);