The layout system
One of the greatest features of the Ext JS library is the ability to create layouts in an easy way. We can define fixed layouts or fluid layouts using the right classes.
At this point, you know how a container works. We can arrange the children of a container by setting a layout. If we don't define a layout to our containers, by default the auto layout will be used. In our previous examples, we used the auto layout and as we could see, the children or HTML are displayed one after another.
There are many available layouts we can use to arrange our components, such as accordions, cards, columns, and so on.
We can find all the available layouts in the Ext.layout.container package. Go to the documentation and look into the layouts enum class: http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.enums.Layout.
Here we will see many classes, each representing a type of layout. Some of the most common layouts are:
- The Border layout
- The Fit layout
- The Card layout
- The Accordion...
