Clear Up
SharpKit Reference

FieldSet Class

A container for grouping sets of fields, rendered as a HTML fieldset element. The title config will be rendered as the fieldset's legend.

While FieldSets commonly contain simple groups of fields, they are general Containers and may therefore contain any type of components in their items, including other nested containers. The default 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 collapsible config to true; this will result in a collapse button being rendered next to the legend title, or:
  2. Set the checkboxToggle config to true; this is similar to using collapsible but renders a 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 form submit parameters using the checkboxName as its parameter name.

Example usage

    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
            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
            title: 'Show Panel', // title or checkboxToggle creates fieldset header
            columnWidth: 0.5,
            checkboxToggle: true,
            collapsed: true, // fieldset initially collapsed
            items :[{
            xtype: 'panel',
            anchor: '100%',
            title: 'Panel inside a fieldset',
            frame: true,
            height: 52

Namespace: Ext.form


Name Description
checkboxCmp Refers to the Ext.form.field.Checkbox component that is added next to the title in the legend. Only populated if the fieldset is configured with checkboxToggle:true.
legend The component for the fieldset's legend. Will only be defined if the configuration requires a legend to be created, by setting the title or checkboxToggle options.
toggleCmp Refers to the 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 collapsible:true.


Name Description
checkboxName The name to assign to the fieldset's checkbox if checkboxToggle = true (defaults to '[fieldset id]-checkbox').
checkboxToggle 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 checkboxName. Defaults to: false
collapsed Set to true to render the fieldset as collapsed by default. If checkboxToggle is specified, the checkbox will also be unchecked by default. Defaults to: false
collapsible 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 checkboxToggle. Use the collapsed config to collapse the fieldset by default. Defaults to: false
title A title to be displayed in the fieldset's legend. May contain HTML markup.
toggleOnTitleClick Set to true will add a listener to the titleCmp property for the click event which will execute the toggle method. This option is only used when the collapsible property is set to true. Defaults to: true


Name Description
collapse() Collapses the fieldset.
createCheckboxCmp() 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.
createTitleCmp() Creates the legend title component. This is only called internally, but could be overridden in subclasses to customize the title component. If toggleOnTitleClick is set to true, a listener for the click event will toggle the collapsed state of the FieldSet.
createToggleCmp() Creates the toggle button component. This is only called internally, but could be overridden in subclasses to customize the toggle component.
expand() Expands the fieldset.
setTitle(JsString) Sets the title of this fieldset
toggle() Toggle the fieldset's collapsed state to the opposite of what it is currently
© Copyright 2005-2011 SharpKit. All rights reserved.