3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.form.FieldSet
\r
10 * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
\r
12 var form = new Ext.FormPanel({
\r
13 title: 'Simple Form with FieldSets',
\r
14 labelWidth: 75, // label settings here cascade unless overridden
\r
15 url: 'save-form.php',
\r
17 bodyStyle:'padding:5px 5px 0',
\r
19 renderTo: document.body,
\r
20 layout:'column', // arrange items in columns
\r
21 defaults: { // defaults applied to items
\r
24 bodyStyle: 'padding:4px'
\r
27 // Fieldset in Column 1
\r
30 title: 'Fieldset 1',
\r
34 anchor: '-20' // leave room for error icon
\r
36 defaultType: 'textfield',
\r
38 fieldLabel: 'Field 1'
\r
40 fieldLabel: 'Field 2'
\r
42 fieldLabel: 'Field 3'
\r
46 // Fieldset in Column 2 - Panel inside
\r
48 title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
\r
51 checkboxToggle: true,
\r
52 collapsed: true, // fieldset initially collapsed
\r
57 title: 'Panel inside a fieldset',
\r
65 * @param {Object} config Configuration options
\r
68 Ext.form.FieldSet = Ext.extend(Ext.Panel, {
\r
70 * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just
\r
71 * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
\r
72 * to <tt>false</tt>).
\r
73 * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
\r
74 * If <tt>true</tt> is specified, the default DomHelper config object used to create the element
\r
75 * is:</p><pre><code>
\r
76 * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
\r
80 * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
\r
81 * (defaults to <tt>'[checkbox id]-checkbox'</tt>).
\r
84 * @cfg {Boolean} collapsible
\r
85 * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
\r
86 * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
\r
87 * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
\r
90 * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
\r
93 * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see
\r
94 * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
\r
95 * This property cascades to child containers.
\r
98 * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
\r
100 baseCls : 'x-fieldset',
\r
102 * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
\r
106 * @cfg {Boolean} animCollapse
\r
107 * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
\r
108 * animation (defaults to <tt>false</tt>).
\r
110 animCollapse : false,
\r
113 onRender : function(ct, position){
\r
115 this.el = document.createElement('fieldset');
\r
116 this.el.id = this.id;
\r
117 if (this.title || this.header || this.checkboxToggle) {
\r
118 this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';
\r
122 Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
\r
124 if(this.checkboxToggle){
\r
125 var o = typeof this.checkboxToggle == 'object' ?
\r
126 this.checkboxToggle :
\r
127 {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
\r
128 this.checkbox = this.header.insertFirst(o);
\r
129 this.checkbox.dom.checked = !this.collapsed;
\r
130 this.mon(this.checkbox, 'click', this.onCheckClick, this);
\r
135 onCollapse : function(doAnim, animArg){
\r
137 this.checkbox.dom.checked = false;
\r
139 Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
\r
144 onExpand : function(doAnim, animArg){
\r
146 this.checkbox.dom.checked = true;
\r
148 Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
\r
152 * This function is called by the fieldset's checkbox when it is toggled (only applies when
\r
153 * checkboxToggle = true). This method should never be called externally, but can be
\r
154 * overridden to provide custom behavior when the checkbox is toggled if needed.
\r
156 onCheckClick : function(){
\r
157 this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
\r
161 * @cfg {String/Number} activeItem
\r
165 * @cfg {Mixed} applyTo
\r
169 * @cfg {Boolean} bodyBorder
\r
173 * @cfg {Boolean} border
\r
177 * @cfg {Boolean/Number} bufferResize
\r
181 * @cfg {Boolean} collapseFirst
\r
185 * @cfg {String} defaultType
\r
189 * @cfg {String} disabledClass
\r
193 * @cfg {String} elements
\r
197 * @cfg {Boolean} floating
\r
201 * @cfg {Boolean} footer
\r
205 * @cfg {Boolean} frame
\r
209 * @cfg {Boolean} header
\r
213 * @cfg {Boolean} headerAsText
\r
217 * @cfg {Boolean} hideCollapseTool
\r
221 * @cfg {String} iconCls
\r
225 * @cfg {Boolean/String} shadow
\r
229 * @cfg {Number} shadowOffset
\r
233 * @cfg {Boolean} shim
\r
237 * @cfg {Object/Array} tbar
\r
241 * @cfg {Array} tools
\r
245 * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
\r
249 * @cfg {String} xtype
\r
265 * @method getBottomToolbar
\r
269 * @method getTopToolbar
\r
273 * @method setIconClass
\r
281 * @event beforeclose
\r
285 * @event bodyresize
\r
293 * @event deactivate
\r
297 Ext.reg('fieldset', Ext.form.FieldSet);
\r