Layouts in Ext JS:

When you add UI component within a container, you need to define their layout properties. Layout tells a container how to arrange a child component. In order to use a layout, your component must be of type Ext.container.Container or something which inherits from it. All layouts inherit from Ext.layout.container.Container.

You can set the layout either as a string or an object:

layout: 'auto'

//or

layout: { 
    type: 'auto'
}

Following are different Layouts available in Ext JS:

Layout	Description
Absolute	This layout inherits anchor layout and adds the ability of positioning the component at particular co-ordinates using standard x, y config options.
Accordion	This layout manages multiple panels in an expandable accordion style. By default one panel can be expanded at any given time, but you can also expand multiple panels using multi config.
Anchor	This layout enables anchoring of contained elements relative to the container's dimensions. Please visit Anchor Rules.
Auto	This layout is applicable when no layout is configured into a container. AutoLayout provides only a passthrough of any layout calls to any child containers.
Border	This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions.
Card	This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards and tab implementations.
Fit	This layout is used in a container that contains a single item that automatically expands to fill the container.
Form	This is a layout that will render form Fields, one under the other all stretched to the Container width.
HBox	A layout that arranges items horizontally across a Container. align, flex and pack are important config options for this layout.
Table	This layout allows you to easily render content into an HTML table.
VBox	A layout that arranges items vertically down a Container. align, flex and pack are important config options for this layout.

The following example demonstrates layouting child components horizontally and vertically into a container.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
    <link href="../../ext-4.2.1/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" />
</head>
<body>
    <script>
        Ext.onReady(function () {

            var comp1 = Ext.create('Ext.Component', {
                html: 'Component 1',
                padding:'5 5 5 5'
            });

            var comp2 = Ext.create('Ext.Component', {
                html: 'Component 2',
                padding: '5 5 5 5'
            });
            var comp3 = Ext.create('Ext.Component', {
                html: 'Component 3',
                padding: '5 5 5 5'
            });
            var comp4 = Ext.create('Ext.Component', {
                html: 'Component 4',
                padding: '5 5 5 5'
            });

            var container = Ext.create('Ext.container.Container', {
                layout: { type: 'vbox' },
                items: [comp3, comp4]
            });

            Ext.create('Ext.container.Container', {
                style: { borderColor: 'Red', borderStyle: 'solid', borderWidth: '1px' },
                renderTo: Ext.getBody(),
                padding: '5 5 5 5',
                layout: { type: 'hbox' },
                items: [comp1, comp2, container]

            });
           
        });
    </script> 
</body>
</html>

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

Visit Layouts Example for more practical information on layouts.