May 09, 2021 Extjs
A layout is how elements are arranged in a container. /b10> This can be horizontal, vertical or any other. /b11> Ext JS defines different layouts in its library, but we can also write custom layouts.
| Number | Layout and description |
|---|---|
| 1 |
Absolute
This layout allows items to be positioned using XY coordinates in the container. |
| 2 |
Accordion
This layout allows all items to be stacked (one on top of the other) in a container. |
| 3 |
Anchor
This layout gives users the privilege of giving each element size relative to the size of the container. |
| 4 |
Border
In this layout, the panels are nested and separated by boundaries. |
| 5 |
Auto
This is the default layout that determines the layout of the element, based on the number of elements. |
| 6 |
Card(TabPanel)
This layout arranges different components in tabs. /b10> The tab appears at the top of the container. O nly one tab is visible at a time, and each tab is treated as a different component. |
| 7 |
Card(Wizard)
In this layout, each element comes to the full container space. /b10> There will be a bottom toolbar in the wizard for navigation. |
| 8 |
Column
This layout is intended to display multiple columns in the container. /b10> We can define the fixed width or percentage width of the column. /b11> The percentage width is calculated based on the full size of the container. |
| 9 |
Fit
In this layout, the container is filled with a single panel and is used when there are no specific requirements related to the layout. |
| 10 |
Table
Because the name means that this layout arranges components in containers in HTML table format. |
| 11 |
vBox
This layout allows elements to be distributed vertically. /b10> This is one of the most commonly used layouts. |
| 12 |
hBox
This layout allows elements to be distributed horizontally. |