Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel
          FieldSet

Class Ext.form.FieldSet

Package:Ext.form
Defined In:FieldSet.js
Class:FieldSet
Extends:Panel
xtype:fieldset
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, 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
        }]
    }]
});

Config Options

Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to false).
FieldSet
 baseCls : String
The base CSS class applied to the fieldset (defaults to 'x-fieldset').
FieldSet
 bubbleEvents : Array

An array of events that, when fired, should be bubbled to any parent container. Defaults to ['add', 'remove'].

Container
 checkboxName : String
The name to assign to the fieldset's checkbox if checkboxToggle = true (defaults to '[checkbox id]-checkbox').
FieldSet
 collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 labelWidth : Number
The width of labels. This property cascades to child containers.
FieldSet
 layout : String
The Ext.Container.layout to use inside the fieldset (defaults to 'form').
FieldSet
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
Panel
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By