Sencha Documentation

Standard container used for grouping items within a form.
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 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
        }]
    }]
});

Config Options

 
baseCls : String
The base CSS class applied to the fieldset (defaults to 'x-fieldset').
The base CSS class applied to the fieldset (defaults to 'x-fieldset').
 
checkboxName : String
The name to assign to the fieldset's checkbox if checkboxToggle = true (defaults to '[fieldset id]-checkbox').
The name to assign to the fieldset's checkbox if checkboxToggle = true (defaults to '[fieldset id]-checkbox').
 
checkboxToggle : Boolean
Set to true to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the fieldset ...
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. (defaults to false). This checkbox will be included in form submits using the checkboxName.
 
collapsed : Boolean
Set to true to render the fieldset as collapsed by default. If checkboxToggle is specified, the checkbox will also be...
Set to true to render the fieldset as collapsed by default. If checkboxToggle is specified, the checkbox will also be unchecked by default.
 
collapsible : Boolean
Set to true to make the fieldset collapsible and have the expand/collapse toggle button automatically rendered into t...
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 (defaults to false). Another option is to configure checkboxToggle. Use the collapsed config to collapse the fieldset by default.
 
layout : String
The Ext.container.Container.layout for the fieldset's immediate child items. Defaults to 'anchor'.
The Ext.container.Container.layout for the fieldset's immediate child items. Defaults to 'anchor'.
 
monitorPoll : Number
The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
 
monitorValid : Boolean
If true, the form monitors its valid state client-side and regularly fires the clientvalidation event passing that st...
If true, the form monitors its valid state client-side and regularly fires the clientvalidation event passing that state.

When monitoring valid state, the FormPanel enables/disables any of its configured buttons which have been configured with formBind: true depending on whether the form is valid or not. Defaults to false

 
title : String
A title to be displayed in the fieldset's legend. May contain HTML markup.
A title to be displayed in the fieldset's legend. May contain HTML markup.

Properties

 
legend : Ext.Component 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.

Methods

 
collapse : Ext.form.FieldSet
Collapses the fieldset.
Collapses the fieldset.
 
createCheckboxCmp : Ext.Component
 
createTitleCmp : Ext.Component
 
createToggleCmp : Ext.Component
 
expand : Ext.form.FieldSet
Expands the fieldset.
Expands the fieldset.
 
setTitle( String title ) : Ext.form.FieldSet
Sets the title of this fieldset
Sets the title of this fieldset

Parameters

  • title : String
    The new title

Returns

  • Ext.form.FieldSet   this
 
Starts monitoring of the valid state of this form. Usually this is done by passing the config option "monitorValid"
Starts monitoring of the valid state of this form. Usually this is done by passing the config option "monitorValid"
 
Stops monitoring of the valid state of this form
Stops monitoring of the valid state of this form
 
toggle : Void
Toggle the fieldset's collapsed state to the opposite of what it is currently
Toggle the fieldset's collapsed state to the opposite of what it is currently