Clear Up
SharpKit Reference

HBox Class

A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration.

This layout may also be used to set the heights of child items by configuring it with the align option.

    Ext.create('Ext.Panel', {
            width: 500,
            height: 300,
            title: "HBoxLayout Panel",
            layout: {
            type: 'hbox',
            align: 'stretch'
            renderTo: document.body,
            items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            flex: 2
            xtype: 'panel',
            title: 'Inner Panel Two',
            flex: 1
            xtype: 'panel',
            title: 'Inner Panel Three',
            flex: 1

Namespace: Ext.layout.container

Base Interfaces

Derived Types



Name Description
align Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
  • top : Default child items are aligned vertically at the top of the container
  • middle : child items are aligned vertically in the middle of the container
  • stretch : child items are stretched vertically to fill the height of the container
  • stretchmax : child items are stretched vertically to the height of the largest item.
  • Defaults to: "top"
    © Copyright 2005-2011 SharpKit. All rights reserved.