HBox Class

Namespace: Ext.layout

Base Types

System.Object

Constructors

Name Description
HBox()

Properties

Name Description
alias
alternateClassName The HBox (short for horizontal box) layout makes it easy to position items horizontally in a {@link Ext.Container Container}. It can size items based on a fixed width or a fraction of the total width available. For example, an email client might have a list of messages pinned to the left, taking say one third of the available width, and a message viewing panel in the rest of the screen. We can achieve this with hbox layout's *flex* config: @example Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { html: 'message list', style: 'background-color: #5E99CC;', flex: 1 }, { html: 'message preview', style: 'background-color: #759E60;', flex: 2 } ] }); This will give us two boxes - one that's one third of the available width, the other being two thirds of the available width: {@img ../guides/layouts/hbox.jpg} We can also specify fixed widths for child items, or mix fixed widths and flexes. For example, here we have 3 items - one on each side with flex: 1, and one in the center with a fixed width of 100px: @example Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { html: 'Left item', style: 'background-color: #759E60;', flex: 1 }, { html: 'Center item', width: 100 }, { html: 'Right item', style: 'background-color: #5E99CC;', flex: 1 } ] }); Which gives us an effect like this: {@img ../guides/layouts/hboxfixed.jpg} For a more detailed overview of what layouts are and the types of layouts shipped with Sencha Touch 2, check out the [Layout Guide](#!/guide/layouts).
extend The HBox (short for horizontal box) layout makes it easy to position items horizontally in a {@link Ext.Container Container}. It can size items based on a fixed width or a fraction of the total width available. For example, an email client might have a list of messages pinned to the left, taking say one third of the available width, and a message viewing panel in the rest of the screen. We can achieve this with hbox layout's *flex* config: @example Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { html: 'message list', style: 'background-color: #5E99CC;', flex: 1 }, { html: 'message preview', style: 'background-color: #759E60;', flex: 2 } ] }); This will give us two boxes - one that's one third of the available width, the other being two thirds of the available width: {@img ../guides/layouts/hbox.jpg} We can also specify fixed widths for child items, or mix fixed widths and flexes. For example, here we have 3 items - one on each side with flex: 1, and one in the center with a fixed width of 100px: @example Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { html: 'Left item', style: 'background-color: #759E60;', flex: 1 }, { html: 'Center item', width: 100 }, { html: 'Right item', style: 'background-color: #5E99CC;', flex: 1 } ] }); Which gives us an effect like this: {@img ../guides/layouts/hboxfixed.jpg} For a more detailed overview of what layouts are and the types of layouts shipped with Sencha Touch 2, check out the [Layout Guide](#!/guide/layouts).
sizeChangeEventName
sizePropertyName
© Copyright 2005-2011 SharpKit. All rights reserved.