Class Ext.Container

Base class for any Ext.BoxComponent that can contain other components. The most commonly used Container classes are Ext.Panel, Ext.Window and Ext.TabPanel, but you can create a lightweight Container to encapsulate an HTML element that is created to your specifications at render time by using the autoEl config option which takes the form of a DomHelper specification. If you do not need the capabilities offered by the above mentioned classes, for instance embedded column layouts inside FormPanels, then this is a useful technique.

The code below illustrates both how to explicitly create a Container, and how to implicitly create one using the 'container' xtype:

var embeddedColumns = new Ext.Container({
    autoEl: {},
    layout: 'column',
    defaults: {
        xtype: 'container',
        autoEl: {},
        layout: 'form',
        columnWidth: 0.5,
        style: {
            padding: '10px'
        }
    },
    items: [{
        items: {
            xtype: 'datefield',
            name: 'startDate',
            fieldLabel: 'Start date'
        }
    }, {
        items: {
            xtype: 'datefield',
            name: 'endDate',
            fieldLabel: 'End date'
        }
    }]
});

When either specifying child items of a Container, or dynamically adding components to a Container, remember to consider how you wish the Container to arrange those child elements, and whether those child elements need to be sized using one of Ext's built-in layout schemes.

By default, Containers use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all. This is a common source of confusion when widgets like GridPanels or TreePanels are added to Containers for which no layout has been specified. If a Container is left to use the ContainerLayout scheme, none of its child components will be resized, or changed in any way when the Container is resized.

A very common example of this is where a developer will attempt to add a GridPanel to a TabPanel by wrapping the GridPanel inside a wrapping Panel and add that wrapping Panel to the TabPanel. This misses the point that Ext's inheritance means that a GridPanel is a Component which can be added unadorned into a Container. If that wrapping Panel has no layout configuration, then the GridPanel will not be sized as expected.

Below is an example of adding a newly created GridPanel to a TabPanel. A TabPanel uses Ext.layout.CardLayout as its layout manager which means all its child items are sized to fit exactly into its client area. The following code requires prior knowledge of how to create GridPanels. See Ext.grid.GridPanel, Ext.data.Store and Ext.data.JsonReader as well as the grid examples in the Ext installation's examples/grid directory.

//  Create the GridPanel.
myGrid = new Ext.grid.GridPanel({
    store: myStore,
    columns: myColumnModel,
    title: 'Results',
});

myTabPanel.add(myGrid);
myTabPanel.setActiveTab(myGrid);