Secha Touch: Layouts

Layouts describe the sizing and positioning on Components in your app.

HBox Layout:

It can arrange components in a wide variety of horizontal combinations.
              layout: 'hbox'

VBox Layout:

It can arrange components in a wide variety of Vertical combinations.
              layout: 'vbox'

Card Layout:

Sometimes you want to show several information screens information on a small device screen. TabPanels and Carousels both enable you to see one screen of many at a time, and underneath they both use a Card Layout.

Card Layout takes the size of the Container it is applied to and sizes the currently active item so as to completely fill the Container. It then hides the rest of the items, allowing you to change which one is currently visible, but only showing one at once:

var panel = Ext.create('Ext.Panel', 

                 { 

                     layout: 'card', 

                     items: [ 

                                   { html: "First Item" }, 

                                   { html: "Second Item" }, 

                                   { html: "Third Item" }, 

                                   { html: "Fourth Item" } 

                              ] 

                 }); 

panel.setActiveItem(1);

In this example we created a Panel with a Card Layout and later set the second item as active (the active item index is zero-based, so 1 corresponds to the second item).

Fit Layout:

The Fit Layout is probably the simplest layout available. All it does is make a child component fit the full size of its parent Container.

           layout: 'fit'