---

• Next »
• « Previous

Ext JS Containers:

Ext JS includes components that can contain other components are called container. You can add, insert or remove components from the container and also arrange child components using different layouts.

Ext.container.Container is a base class for all the containers in Ext JS.

Adding Components to Container:

You can add different types of Ext JS components into a container using items config property or add() method.

Note: Container can also include another container.

The following example demonstrates how to add components into a container using items config as well as add() method.

Ext.onReady(function () {
    var comp1 = Ext.create('Ext.Component', {
        html:'Component 1'
    });
          
    var comp2 = Ext.create('Ext.Component', {
        html: 'Component 2'
    });

    var comp3 = Ext.create('Ext.Component', {
        html: 'Component 3'
    });

    var comp4 = Ext.create('Ext.Component', {
        html: 'Component 4'
    });

    var container1 = Ext.create('Ext.container.Container', {
        style: { borderColor: 'Red', borderStyle: 'solid', borderWidth: '1px' },
        width: '50%',
        padding: '5 5 5 5',
        items: [comp3, comp4]
    });

    // adding compoents into container using items config
    var container2 = Ext.create('Ext.container.Container', {
        renderTo: Ext.getBody(),
        title: 'Container',
        border: 1,
        width: '50%',
        padding:'5 5 5 5',
        style: { borderColor: '#000000', borderStyle: 'solid', borderWidth: '1px' },
        items: [comp1, comp2]
    });

    // adding container into container 
    container2.add(container1);
});

Try it on https://fiddle.sencha.com/#fiddle/s7u

In the above example, comp3 and comp4 are added into container1 using items config property whereas container2 includes comp1 and comp2. The container1 also adds container2 using add() method. The above example would be resulted as below.

Note: Containers are same in Ext JS 4.x, 5.x and 6.x. The only difference is that the incremental version provides more config properties and methods.

Ext JS 6 Containers:

The following table lists all important containers in Ext JS 6.

Class Name	xtype	Description
Ext.container.Viewport	viewport	ViewPort is a specialized container representing the viewable application area (the browser viewport). Generally there is a single ViewPort in an Ext JS application which will define the application's main areas like north, west, south, east and center.
container	container	Container is lightweight container which provides basic functionality of containing items, namely adding, inserting and removing items. So use this container when you just want to add other components and arrange them.
Ext.panel.Panel	panel	Panel is a special type of container that has specific functionality and components. Each panel has header, tool, body, toolbar components. So use Panel when you want specific user interface with header, toolbar and body part. Do not use it if you do not want these features in panel, use container instead.
Ext.form.Panel	form	Ext.form.Panel provides standard containers for form. Use it when you want standard application form kind of user interface.
Ext.form.FieldContainer	fieldcontainer	FieldContainer implements labelable mixins so that it can be rendered with label and error message around every sub-item component. You can use fieldcontainer in the form to arrange inner fields.
Ext.form.FieldSet	fieldset	Fieldset is a container for group of fields in an Ext.form.Panel.
Ext.grid.Panel	grid	Grid displays large amount of tabular data with sorting, filtering and other functionality.
Ext.container.ButtonGroup	buttongroup	ButtonGroup provides a container for arranging a group of related Buttons in a tabular manner.
Ext.tab.Panel	tabpanel	Ext.tab.Panel is a basic tab container. Use it when you want tab or wizard in your user interface.
Ext.tree.Panel	treepanel	TreePanel provides tree-structured UI representation of tree-structured data.
Ext.menu.Menu	menu	Menu is a container to which you can add Menu Items.
Ext.toolbar.Toolbar	toolbar	Toolbar is a container for toolbar buttons, text, fill, item etc.

Ext JS provides different types of layouts to arrange child components into a container. Learn about the layouts in the next section.

---

---

• Next »
• « Previous