/*!
|
* Ext JS Library 3.1.0
|
* Copyright(c) 2006-2009 Ext JS, LLC
|
* licensing@extjs.com
|
* http://www.extjs.com/license
|
*/
|
/**
|
* @class Ext.form.FieldSet
|
* @extends Ext.Panel
|
* Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
|
* <pre><code>
|
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
|
}]
|
}]
|
});
|
* </code></pre>
|
* @constructor
|
* @param {Object} config Configuration options
|
* @xtype fieldset
|
*/
|
Ext.form.FieldSet = Ext.extend(Ext.Panel, {
|
/**
|
* @cfg {Mixed} checkboxToggle <tt>true</tt> 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 <tt>false</tt>).
|
* <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
|
* If <tt>true</tt> is specified, the default DomHelper config object used to create the element
|
* is:</p><pre><code>
|
* {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
|
* </code></pre>
|
*/
|
/**
|
* @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
|
* (defaults to <tt>'[checkbox id]-checkbox'</tt>).
|
*/
|
/**
|
* @cfg {Boolean} collapsible
|
* <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
|
* rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
|
* button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
|
*/
|
/**
|
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
|
*/
|
/**
|
* @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> 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 <tt>'x-fieldset'</tt>).
|
*/
|
baseCls : 'x-fieldset',
|
/**
|
* @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
|
*/
|
layout : 'form',
|
/**
|
* @cfg {Boolean} animCollapse
|
* <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
|
* animation (defaults to <tt>false</tt>).
|
*/
|
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 {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);
|
