A container which participates in field layout. This allows grouping of several components with a field label and optional error message, so that it lines up nicely with other fields in a form. The items of the container will be layed out within the field body area according to the configured layout.

Like regular fields, FieldContainer can inherit its decoration configuration from the fieldDefaults of an enclosing FormPanel. In addition, FieldContainer itself can pass fieldDefaults to any fields it may itself contain.

Example usage:

Ext.create('Ext.form.FormPanel', {
    renderTo: Ext.getBody(),
    title: 'FieldContainer Examples',
    width: 600,
    bodyPadding: 10,

    items: [{
        fieldLabel: 'Panels',
        xtype: 'fieldcontainer',
        layout: 'hbox',
        defaults: {
            height: 50,
            flex: 1
        },
        items: [{
            xtype: 'panel',
            title: 'Panel 1'
        }, {
            xtype: 'splitter'
        }, {
            xtype: 'panel',
            title: 'Panel 2'
        }, {
            xtype: 'splitter'
        }, {
            xtype: 'panel',
            title: 'Panel 3'
        }]
    }]
});

Config Options

fieldDefaults : Object

If specified, the properties in this object are used as default config values for each Ext.form.Labelable instance (e...

If specified, the properties in this object are used as default config values for each Ext.form.Labelable instance (e.g. Ext.form.BaseField or Ext.form.FieldContainer) that is added as a descendant of this FieldContainer. Corresponding values specified in an individual field's own configuration, or from the defaults config of its parent container, will take precedence. See the documentation for Ext.form.Labelable to see what config options may be specified in the fieldDefaults.

Example:

new Ext.form.FieldContainer({
    fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 100
    },
    items: [{
        xtype: 'fieldset',
        defaults: {
            labelAlign: 'top'
        },
        items: [{
            name: 'field1'
        }, {
            name: 'field2'
        }]
    }, {
        xtype: 'fieldset',
        items: [{
            name: 'field3',
            labelWidth: 150
        }, {
            name: 'field4'
        }]
    }]
});

In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100 (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use the labelWidth:150 from its own config.

Sencha Documentation

Ext.form.FieldContainer

Config Options