Sencha

Sencha the Layout Manager

Sencha Using the hbox and vbox Layout Managers

I am just trying myself to brief about layout management in Sencha; Sencha the Layout Manager

The hbox layout manager orients nested components along the horizontal axis.
The vbox layout manager operates identically to the hbox layout manager, except that it orients components along the vertical axis.

The following example illustates using a simple hbox layout:

Ext.Viewport.add([
{
xtype: 'container',
layout: 'hbox',
cls: 'colorize',
width: 200,
height: 100,
defaults: {
xtype: 'component',
cls: 'colorize',
margin: '5 5 5 5'
},
items: [
{ html: 'Hello' },
{ html: 'World' }
]
}
]);

Using Flex Sizing

You can assign the flex property to any component that is participating in an hbox or vbox layout. The flex property sizes components relative to each other as illustrated by the following example. Note that the “Hello” component is flexed to be twice the size as the “World” component.

Ext.Viewport.add([
{
xtype: 'container',
layout: 'hbox',
cls: 'colorize',
width: 200,
height: 100,
defaults: {
xtype: 'component',
cls: 'colorize',
margin: '5 5 5 5'
},
items: [
{ html: 'Hello', flex: 2 },
{ html: 'World', flex: 1 }
]
}
]);

Centering Components in a Layout

Use the pack configuration property of the hbox or vbox layout to control whether the nested component items should align to the left edge, right edge, center, or be justified in their container.

The following example centers nested components in their parent container:

Ext.Viewport.add([
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'center'
},
cls: 'colorize',
width: 200
height: 100,
defaults: {
xtype: 'component',
cls: 'colorize',
margin: '5 5 5 5'
},
items: [
{ html: 'Hello' },
{ html: 'World' }
]
}
]);

Valid values for the pack attribute are ‘left’ (default), ‘right’, ‘center’, and ‘justify’:

Layout Config Result
{
type: ‘hbox’,
pack: ‘left’
}
pack: 'left'
{
type: ‘hbox’,
pack: ‘right’
}
pack: 'right'
{
type: ‘hbox’,
pack: ‘center’
}
pack: 'center'
{
type: ‘hbox’,
pack: ‘justify’
}
pack: 'justify'

 

Aligning Components in a Layout

Use the align configuration property of the hbox or vbox layout to designate whether the nested containers should “stretch” across the opposing axis. For example, in an hbox layout, configuring align: ‘stretch’ would expand the child components vertically. In a vbox layout, configuring align: ‘stretch’ would expand the child components horizontally.

Valid values for the align attribute are ‘stretch’,’start’, ‘end’, and ‘center’.

Layout Config Result
{
type: ‘hbox’,
pack: ‘center’,
align: ‘center’
}
using align:center in an hbox
{
type: ‘hbox’,
pack: ‘center’,
align: ‘stretch’
}
align: 'stretch'
{
type: ‘hbox’,
pack: ‘center’,
align: ‘start’
}
align: 'start'
{
type: ‘hbox’,
pack: ‘center’,
align: ‘end’
}
align: 'end'