/** * 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 #cfg-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 {@link #checkbox}. * * # 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 * 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 * }] * }] * }); */Ext.define('Ext.form.FieldSet', { extend: 'Ext.container.Container', alias: 'widget.fieldset', mixins: { fieldAncestor: 'Ext.form.FieldAncestor' }, 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 {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 #checkbox} configuration. */ /** * @cfg {String} checkboxName * @deprecated 6.2.0 Use the name property in {@link #checkbox} instead. * The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true * (defaults to '[fieldset id]-checkbox'). */ /** * @cfg {String} checkboxUI * The ui to use for the fieldset's checkbox. */ checkboxUI: 'default', /** * @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 {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. */ collapsed: false, /** * @cfg {Boolean} toggleOnTitleClick * Set to true will add a listener to the titleCmp property for the click event which * will execute the {@link #toggle} method. This option is only used when the * {@link #collapsible} property is set to true. */ toggleOnTitleClick: true, /** * @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. */ /** * @cfg {String} baseCls * The base CSS class applied to the fieldset. */ baseCls: Ext.baseCSSPrefix + 'fieldset', /** * @cfg {Ext.enums.Layout/Object} layout * The {@link Ext.container.Container#layout} for the fieldset's immediate child items. */ layout: 'anchor', /** * @cfg {String} descriptionText * Fieldset description to be announced by screen readers. * @locale */ descriptionText: '{0} field set', /** * @cfg {String} expandText * Text to be announced by screen readers when toggle tool * or checkbox is focused. * @locale */ expandText: 'Expand field set', componentLayout: 'fieldset', /** * @property ariaRole * @inheritdoc */ ariaRole: 'group', /** * @property focusable * @inheritdoc */ focusable: false, /** * @cfg autoEl * @inheritdoc */ autoEl: 'fieldset', /** * @cfg {Object} checkbox * A configuration for the generated checkbox that is adjacent to the {@link #title} * in the header. This config is only effective when {@link #checkboxToggle} is true * * @since 6.2.0 */ checkbox: null, /** * @cfg childEls * @inheritdoc */ childEls: [ 'body' ], /* eslint-disable indent, max-len */ /** * @cfg renderTpl * @inheritdoc */ renderTpl: [ '{%this.renderLegend(out,values);%}', '<div id="{id}-body" data-ref="body" class="{baseCls}-body {baseCls}-body-{ui} {bodyTargetCls}" ', 'role="presentation"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>', '{%this.renderContainer(out,values);%}', '</div>' ], /* eslint-enable indent, max-len */ /** * @cfg stateEvents * @inheritdoc Ext.state.Stateful#cfg-stateEvents * @localdoc By default the following stateEvents are added: * * - {@link #event-resize} - _(added by Ext.Component)_ * - {@link #event-collapse} * - {@link #event-expand} */ stateEvents: [ 'collapse', 'expand' ], /** * @property maskOnDisable * @inheritdoc */ maskOnDisable: false, /** * @event beforeexpand * Fires before this FieldSet is expanded. Return false to prevent the expand. * @param {Ext.form.FieldSet} fieldset The FieldSet being expanded. */ /** * @event beforecollapse * Fires before this FieldSet is collapsed. Return false to prevent the collapse. * @param {Ext.form.FieldSet} fieldset The FieldSet being collapsed. */ /** * @event expand * Fires after this FieldSet has expanded. * @param {Ext.form.FieldSet} fieldset The FieldSet that has been expanded. */ /** * @event collapse * Fires after this FieldSet has collapsed. * @param {Ext.form.FieldSet} fieldset The FieldSet that has been collapsed. */ initComponent: function() { var me = this, baseCls = me.baseCls; // We need to render the aria-label attribute instead of relying on // aria-labelledby because the contents of these differ. if (me.ariaRole && !me.ariaLabel) { me.ariaLabel = Ext.String.formatEncode(me.descriptionText, me.title || ''); } me.ariaRenderAttributes = me.ariaRenderAttributes || {}; me.ariaRenderAttributes['aria-expanded'] = !me.collapsed; me.initFieldAncestor(); me.callParent(); // Fieldsets cannot support managePadding because the managePadding config causes // the paddding to be added to the innerCt instead of the fieldset element. The // padding must be on the fieldset element because the horizontal position of the // legend is determined by the fieldset element's padding // // As a consequence of the inability to support managePadding, manageOverflow // cannot be supported either because the correct overflow cannot be calculated // without managePadding to adjust for cross-browser differences in the way // padding is handled on overflowing elements. // See Ext.layout.container.Auto for more info. me.layout.managePadding = me.layout.manageOverflow = false; if (me.collapsed) { me.addCls(baseCls + '-collapsed'); me.collapse(); } if (me.title || me.checkboxToggle || me.collapsible) { me.addTitleClasses(); me.legend = me.createLegendCt(); } me.initMonitor(); }, /** * Initialized the renderData to be used when rendering the renderTpl. * @return {Object} Object with keys and values that are going to be applied to the renderTpl * @private */ initRenderData: function() { var me = this, data = me.callParent(); data.bodyTargetCls = me.bodyTargetCls; me.protoBody.writeTo(data); delete me.protoBody; return data; }, doDestroy: function() { var me = this, legend = me.legend; if (legend) { // get rid of the ownerCt since it's not a proper item delete legend.ownerCt; legend.destroy(); me.legend = null; } me.callParent(); }, getState: function() { var state = this.callParent(); state = this.addPropertyToState(state, 'collapsed'); return state; }, afterCollapse: Ext.emptyFn, afterExpand: Ext.emptyFn, collapsedHorizontal: function() { return true; }, collapsedVertical: function() { return true; }, createLegendCt: function() { var me = this, items = [], legendCfg = { baseCls: me.baseCls + '-header', // use container layout so we don't get the auto layout innerCt/outerCt layout: 'container', ui: me.ui, id: me.id + '-legend', autoEl: 'legend', ariaRole: null, items: items, ownerCt: me, shrinkWrap: true, ownerLayout: me.componentLayout }, legend; // Checkbox if (me.checkboxToggle) { items.push(me.createCheckboxCmp()); } else if (me.collapsible) { // Toggle button items.push(me.createToggleCmp()); } // Title items.push(me.createTitleCmp()); legend = new Ext.container.Container(legendCfg); return legend; }, /** * Creates the legend title component. This is only called internally, but could be overridden * in subclasses to customize the title component. If {@link #toggleOnTitleClick} is set * to true, a listener for the click event will toggle the collapsed state of the FieldSet. * @return {Ext.Component} * @protected */ createTitleCmp: function() { var me = this, cfg = { html: me.title, ui: me.ui, cls: me.baseCls + '-header-text', id: me.id + '-legendTitle', ariaRole: 'presentation' }; if (me.collapsible && me.toggleOnTitleClick) { cfg.listeners = { click: { element: 'el', scope: me, fn: me.toggle } }; cfg.cls += ' ' + me.baseCls + '-header-text-collapsible'; } me.titleCmp = new Ext.Component(cfg); return me.titleCmp; }, /** * @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. */ /** * 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', cls = me.baseCls + '-header' + suffix, checkboxCmp; cls += ' ' + cls + '-' + me.ui; me.checkboxCmp = checkboxCmp = new Ext.form.field.Checkbox(Ext.apply({ hideEmptyLabel: true, name: me.checkboxName || me.id + suffix, cls: cls, id: me.id + '-legendChk', ui: me.checkboxUI, checked: !me.collapsed, msgTarget: 'none', listeners: { change: me.onCheckChange, scope: me }, ariaLabel: me.expandText }, me.checkbox)); return 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. */ /** * 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, toggleCmp; me.toggleCmp = toggleCmp = new Ext.panel.Tool({ // fieldset tools may be styled differently from regular tools and so we need // to tell the layout system not to cache the height if this tool happens // to be the first one through the layout system cacheHeight: false, cls: me.baseCls + '-header-tool-' + me.ui, type: 'toggle', handler: me.toggle, id: me.id + '-legendToggle', scope: me, // This tool is akin to a checkbox; its is considered "checked" // when fieldset is expanded, and vice versa. ariaRole: 'checkbox', ariaLabel: me.expandText, ariaRenderAttributes: { 'aria-checked': !me.collapsed } }); return toggleCmp; }, doRenderLegend: function(out, renderData) { // Careful! This method is bolted on to the renderTpl so all we get for context is // the renderData! The "this" pointer is the renderTpl instance! var me = renderData.$comp, legend = me.legend, tree; // Create the Legend component if needed if (legend) { legend.ownerLayout.configureItem(legend); me.setLegendCollapseImmunity(legend); tree = legend.getRenderTree(); Ext.DomHelper.generateMarkup(tree, out); } }, getCollapsed: function() { return this.collapsed ? 'top' : false; }, getCollapsedDockedItems: function() { var legend = this.legend; return legend ? [ legend ] : []; }, /** * Sets the title of this fieldset. * @param {String} title The new title. * @return {Ext.form.FieldSet} this */ setTitle: function(title) { var me = this, legend = me.legend; me.title = title; me.ariaLabel = Ext.String.formatEncode(me.descriptionText, title || ''); if (me.rendered) { if (!legend) { me.legend = legend = me.createLegendCt(); me.addTitleClasses(); legend.ownerLayout.configureItem(legend); me.setLegendCollapseImmunity(legend); legend.render(me.el, 0); } me.titleCmp.update(title); // ariaLabel property was htmlEncoded in initComponent me.ariaEl.dom.setAttribute('aria-label', me.ariaLabel); } else if (legend) { me.titleCmp.update(title); } else { me.addTitleClasses(); me.legend = me.createLegendCt(); } return me; }, addTitleClasses: function() { var me = this, title = me.title, baseCls = me.baseCls; if (title) { me.addCls(baseCls + '-with-title'); } if (title || me.checkboxToggle || me.collapsible) { me.addCls(baseCls + '-with-legend'); } }, /** * Expands the fieldset. * @return {Ext.form.FieldSet} this */ expand: function() { return this.setExpanded(true); }, /** * Collapses the fieldset. * @return {Ext.form.FieldSet} this */ collapse: function() { return this.setExpanded(false); }, /** * Set the collapsed state of the fieldset. * @param {Boolean} collapsed The collapsed state. * * @since 6.2.0 */ setCollapsed: function(collapsed) { this.setExpanded(!collapsed); }, /** * @private * Collapse or expand the fieldset. */ setExpanded: function(expanded) { var me = this, checkboxCmp = me.checkboxCmp, toggleCmp = me.toggleCmp, operation = expanded ? 'expand' : 'collapse'; if (!me.rendered || me.fireEvent('before' + operation, me) !== false) { expanded = !!expanded; if (checkboxCmp) { checkboxCmp.setValue(expanded); } else if (toggleCmp && toggleCmp.ariaEl.dom) { toggleCmp.ariaEl.dom.setAttribute('aria-checked', expanded); } if (expanded) { me.removeCls(me.baseCls + '-collapsed'); } else { me.addCls(me.baseCls + '-collapsed'); } if (me.ariaEl.dom) { me.ariaEl.dom.setAttribute('aria-expanded', !!expanded); } me.collapsed = !expanded; if (expanded) { delete me.getInherited().collapsed; } else { me.getInherited().collapsed = true; } if (me.rendered) { // say explicitly we are not root because when we have a fixed/configured height // our ownerLayout would say we are root and so would not have it's height // updated since it's not included in the layout cycle me.updateLayout({ isRoot: false }); me.fireEvent(operation, me); } } return me; }, 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; }, /** * Toggle the fieldset's collapsed state to the opposite of what it is currently. */ toggle: function() { this.setExpanded(!!this.collapsed); }, privates: { applyTargetCls: function(targetCls) { this.bodyTargetCls = targetCls; }, finishRender: function() { var legend = this.legend; this.callParent(); if (legend) { legend.finishRender(); } }, getProtoBody: function() { var me = this, body = me.protoBody; if (!body) { me.protoBody = body = new Ext.util.ProtoElement({ styleProp: 'bodyStyle', styleIsText: true }); } return body; }, getDefaultContentTarget: function() { return this.body; }, getTargetEl: function() { return this.body || this.frameBody || this.el; }, initPadding: function(targetEl) { var me = this, body = me.getProtoBody(), padding = me.padding, bodyPadding; if (padding !== undefined) { if (Ext.isIE8) { // IE8 and below display fieldset top padding outside the border // so we transfer the top padding to the body element. padding = me.parseBox(padding); bodyPadding = Ext.Element.parseBox(0); bodyPadding.top = padding.top; padding.top = 0; body.setStyle('padding', me.unitizeBox(bodyPadding)); } targetEl.setStyle('padding', me.unitizeBox(padding)); } }, /** * @private * Handle changes in the checkbox checked state. */ onCheckChange: function(cmp, checked) { this.setExpanded(checked); }, setLegendCollapseImmunity: function(legend) { // Mark the legend as immune to collapse so that when the fieldset // *is* collapsed and the toggle tool or checkbox is focused, // calling isVisible(true) on it will return true instead of false. // See also below in createCheckboxCmp and createToggleCmp. // // It is important to defer this until the inherited hierarchy is setup // completely, otherwise we could cause our inheritedState to get // initialized incorrectly. legend.collapseImmune = true; legend.getInherited().collapseImmune = true; }, setupRenderTpl: function(renderTpl) { this.callParent(arguments); renderTpl.renderLegend = this.doRenderLegend; } }});