Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using the hbox and vbox Layout Managers

Page of 168

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:

Using the 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.

Using Flex Sizing
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:

Using pack:center
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'
Page of 168
comments powered by Disqus