/*! - * Ext JS Library 3.2.0 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license + +- \ No newline at end of file +/** + * @docauthor Jason Johnston <jason@sencha.com> + * + * A container for grouping sets of fields, rendered as a HTML `fieldset` element. The {@link #title} + * config will be rendered as the fieldset's `legend`. + * + * While FieldSets commonly contain simple groups of fields, they are general {@link Ext.container.Container Containers} + * and may therefore contain any type of components in their {@link #items}, including other nested containers. + * The default {@link #layout} for the FieldSet's items is `'anchor'`, but it can be configured to use any other + * layout type. + * + * FieldSets may also be collapsed if configured to do so; this can be done in two ways: + * + * 1. Set the {@link #collapsible} config to true; this will result in a collapse button being rendered next to + * the {@link #title legend title}, or: + * 2. Set the {@link #checkboxToggle} config to true; this is similar to using {@link #collapsible} but renders + * a {@link Ext.form.field.Checkbox checkbox} in place of the toggle button. The fieldset will be expanded when the + * checkbox is checked and collapsed when it is unchecked. The checkbox will also be included in the + * {@link Ext.form.Basic#submit form submit parameters} using the {@link #checkboxName} as its parameter name. + * + * # Example usage + * + * @example + * Ext.create('Ext.form.Panel', { + * 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: 550, + * renderTo: Ext.getBody(), + * layout: 'column', // arrange fieldsets side by side + * defaults: { + * bodyPadding: 4 + * }, + * items: [{ + * // Fieldset in Column 1 - collapsible via toggle button + * xtype:'fieldset', + * columnWidth: 0.5, + * title: 'Fieldset 1', + * collapsible: true, + * defaultType: 'textfield', + * defaults: {anchor: '100%'}, + * layout: 'anchor', + * items :[{ + * fieldLabel: 'Field 1', + * name: 'field1' + * }, { + * fieldLabel: 'Field 2', + * name: 'field2' + * }] + * }, { + * // Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel + * xtype:'fieldset', + * title: 'Show Panel', // title or checkboxToggle creates fieldset header + * 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: 52 + * }] + * }] + * }); */ -/** - * @class Ext.form.FieldSet - * @extends Ext.Panel - * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. - *+- * @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). - *-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 - }] - }] -}); - *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:
+Ext.define('Ext.form.FieldSet', { + extend: 'Ext.container.Container', + alias: 'widget.fieldset', + uses: ['Ext.form.field.Checkbox', 'Ext.panel.Tool', 'Ext.layout.container.Anchor', 'Ext.layout.component.FieldSet'], + + /** + * @cfg {String} title + * A title to be displayed in the fieldset's legend. May contain HTML markup. */ - /** - * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true - * (defaults to '[checkbox id]-checkbox'). + + /** + * @cfg {Boolean} [checkboxToggle=false] + * Set to 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.. This checkbox will be included in form submits using + * the {@link #checkboxName}. */ - /** - * @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 {String} checkboxName + * The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true + * (defaults to '[fieldset id]-checkbox'). */ - /** - * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. + + /** + * @cfg {Boolean} [collapsible=false] + * Set to 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. + * Another option is to configure {@link #checkboxToggle}. Use the {@link #collapsed} config to collapse the + * fieldset by default. */ - /** - * @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 {Boolean} collapsed + * Set to true to render the fieldset as collapsed by default. If {@link #checkboxToggle} is specified, the checkbox + * will also be unchecked by default. */ - /** - * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset'). + collapsed: false, + + /** + * @property {Ext.Component} legend + * The component for the fieldset's legend. Will only be defined if the configuration requires a legend to be + * created, by setting the {@link #title} or {@link #checkboxToggle} options. */ - baseCls : 'x-fieldset', - /** - * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form'). + + /** + * @cfg {String} [baseCls='x-fieldset'] + * The base CSS class applied to the fieldset. */ - layout : 'form', - /** - * @cfg {Boolean} animCollapse - * true to animate the transition when the panel is collapsed, false to skip the - * animation (defaults to false). + baseCls: Ext.baseCSSPrefix + 'fieldset', + + /** + * @cfg {String} layout + * The {@link Ext.container.Container#layout} for the fieldset's immediate child items. */ - animCollapse : false, + layout: 'anchor', - // 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 = this.baseCls + '-header'; - } - } + componentLayout: 'fieldset', + + // No aria role necessary as fieldset has its own recognized semantics + ariaRole: '', + + renderTpl: ['<div id="{id}-body" class="{baseCls}-body"></div>'], + + maskOnDisable: false, - Ext.form.FieldSet.superclass.onRender.call(this, ct, position); + getElConfig: function(){ + return {tag: 'fieldset', id: this.id}; + }, + + initComponent: function() { + var me = this, + baseCls = me.baseCls; + + me.callParent(); - 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); + // Create the Legend component if needed + me.initLegend(); + + // Add body el + me.addChildEls('body'); + + if (me.collapsed) { + me.addCls(baseCls + '-collapsed'); + me.collapse(); } }, // private - onCollapse : function(doAnim, animArg){ - if(this.checkbox){ - this.checkbox.dom.checked = false; + onRender: function(container, position) { + this.callParent(arguments); + // Make sure the legend is created and rendered + this.initLegend(); + }, + + /** + * @private + * Initialize and render the legend component if necessary + */ + initLegend: function() { + var me = this, + legendItems, + legend = me.legend; + + // Create the legend component if needed and it hasn't been already + if (!legend && (me.title || me.checkboxToggle || me.collapsible)) { + legendItems = []; + + // Checkbox + if (me.checkboxToggle) { + legendItems.push(me.createCheckboxCmp()); + } + // Toggle button + else if (me.collapsible) { + legendItems.push(me.createToggleCmp()); + } + + // Title + legendItems.push(me.createTitleCmp()); + + legend = me.legend = Ext.create('Ext.container.Container', { + baseCls: me.baseCls + '-header', + ariaRole: '', + ownerCt: this, + getElConfig: function(){ + var result = { + tag: 'legend', + cls: this.baseCls + }; + + // Gecko3 will kick every <div> out of <legend> and mess up every thing. + // So here we change every <div> into <span>s. Therefore the following + // clearer is not needed and since div introduces a lot of subsequent + // problems, it is actually harmful. + if (!Ext.isGecko3) { + result.children = [{ + cls: Ext.baseCSSPrefix + 'clear' + }]; + } + return result; + }, + items: legendItems + }); } - Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg); + // Make sure legend is rendered if the fieldset is rendered + if (legend && !legend.rendered && me.rendered) { + me.legend.render(me.el, me.body); //insert before body element + } }, - // private - onExpand : function(doAnim, animArg){ - if(this.checkbox){ - this.checkbox.dom.checked = true; - } - Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg); + /** + * Creates the legend title component. This is only called internally, but could be overridden in subclasses to + * customize the title component. + * @return Ext.Component + * @protected + */ + createTitleCmp: function() { + var me = this; + me.titleCmp = Ext.create('Ext.Component', { + html: me.title, + getElConfig: function() { + return { + tag: Ext.isGecko3 ? 'span' : 'div', + cls: me.titleCmp.cls, + id: me.titleCmp.id + }; + }, + cls: me.baseCls + '-header-text' + }); + return me.titleCmp; }, - /** - * 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. + /** + * @property {Ext.form.field.Checkbox} checkboxCmp + * Refers to the {@link Ext.form.field.Checkbox} component that is added next to the title in the legend. Only + * populated if the fieldset is configured with {@link #checkboxToggle}:true. */ - 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 + /** + * Creates the checkbox component. This is only called internally, but could be overridden in subclasses to + * customize the checkbox's configuration or even return an entirely different component type. + * @return Ext.Component + * @protected + */ + createCheckboxCmp: function() { + var me = this, + suffix = '-checkbox'; + + me.checkboxCmp = Ext.create('Ext.form.field.Checkbox', { + getElConfig: function() { + return { + tag: Ext.isGecko3 ? 'span' : 'div', + id: me.checkboxCmp.id, + cls: me.checkboxCmp.cls + }; + }, + name: me.checkboxName || me.id + suffix, + cls: me.baseCls + '-header' + suffix, + checked: !me.collapsed, + listeners: { + change: me.onCheckChange, + scope: me + } + }); + return me.checkboxCmp; + }, + + /** + * @property {Ext.panel.Tool} toggleCmp + * Refers to the {@link Ext.panel.Tool} component that is added as the collapse/expand button next to the title in + * the legend. Only populated if the fieldset is configured with {@link #collapsible}:true. */ - /** - * @method setIconClass - * @hide + + /** + * Creates the toggle button component. This is only called internally, but could be overridden in subclasses to + * customize the toggle component. + * @return Ext.Component + * @protected + */ + createToggleCmp: function() { + var me = this; + me.toggleCmp = Ext.create('Ext.panel.Tool', { + getElConfig: function() { + return { + tag: Ext.isGecko3 ? 'span' : 'div', + id: me.toggleCmp.id, + cls: me.toggleCmp.cls + }; + }, + type: 'toggle', + handler: me.toggle, + scope: me + }); + return me.toggleCmp; + }, + + /** + * Sets the title of this fieldset + * @param {String} title The new title + * @return {Ext.form.FieldSet} this + */ + setTitle: function(title) { + var me = this; + me.title = title; + me.initLegend(); + me.titleCmp.update(title); + return me; + }, + + getTargetEl : function() { + return this.body || this.frameBody || this.el; + }, + + getContentTarget: function() { + return this.body; + }, + + /** + * @private + * Include the legend component in the items for ComponentQuery */ - /** - * @event activate - * @hide + getRefItems: function(deep) { + var refItems = this.callParent(arguments), + legend = this.legend; + + // Prepend legend items to ensure correct order + if (legend) { + refItems.unshift(legend); + if (deep) { + refItems.unshift.apply(refItems, legend.getRefItems(true)); + } + } + return refItems; + }, + + /** + * Expands the fieldset. + * @return {Ext.form.FieldSet} this */ - /** - * @event beforeclose - * @hide + expand : function(){ + return this.setExpanded(true); + }, + + /** + * Collapses the fieldset. + * @return {Ext.form.FieldSet} this */ - /** - * @event bodyresize - * @hide + collapse : function() { + return this.setExpanded(false); + }, + + /** + * @private Collapse or expand the fieldset */ - /** - * @event close - * @hide + setExpanded: function(expanded) { + var me = this, + checkboxCmp = me.checkboxCmp; + + expanded = !!expanded; + + if (checkboxCmp) { + checkboxCmp.setValue(expanded); + } + + if (expanded) { + me.removeCls(me.baseCls + '-collapsed'); + } else { + me.addCls(me.baseCls + '-collapsed'); + } + me.collapsed = !expanded; + if (expanded) { + // ensure subitems will get rendered and layed out when expanding + me.getComponentLayout().childrenChanged = true; + } + me.doComponentLayout(); + return me; + }, + + /** + * Toggle the fieldset's collapsed state to the opposite of what it is currently */ - /** - * @event deactivate - * @hide + toggle: function() { + this.setExpanded(!!this.collapsed); + }, + + /** + * @private + * Handle changes in the checkbox checked state */ + onCheckChange: function(cmp, checked) { + this.setExpanded(checked); + }, + + beforeDestroy : function() { + var legend = this.legend; + if (legend) { + legend.destroy(); + } + this.callParent(); + } }); -Ext.reg('fieldset', Ext.form.FieldSet);- * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'} - *