Ext.js - Layouts


Layout is the way the elements are arranged in a container. It can be horizontal, vertical, or any other. Ext JS has a different layout defined in its library but we can always write custom layouts as well.

Sr.No Layout & Description
1 Absolute

This layout allows to position the items using XY coordinates in the container.

2 Accordion

This layout allows to place all the items in stack fashion (one on top of the other) inside the container.

3 Anchor

This layout gives the privilege to the user to specify the size of each element with respect to the container size.

4 Border

In this layout various panels are nested and separated by borders.

5 Auto

This is the default layout that decides the layout of the elements based on the number of elements.

6 Card(TabPanel)

This layout arranges different components in tab fashion. Tabs will be displayed on top of the container. Every time only one tab is visible and each tab is considered as a different component.

7 Card(Wizard)

In this layout, every time the elements come for full container space. There is a bottom tool bar in the wizard for navigation.

8 Column

This layout is to show multiple columns in the container. We can define a fixed or percentage width to the columns. The percentage width will be calculated based on the full size of the container.

9 Fit

In this layout, the container is filled with a single panel. When there is no specific requirement related to the layout, then this layout is used.

10 Table

As the name implies, this layout arranges the components in a container in the HTML table format.

11 vBox

This layout allows the element to be distributed in a vertical manner. This is one of the most used layout.

12 hBox

This layout allows the element to be distributed in a horizontal manner.