Clear Up
SharpKit Reference

VBox Class

A layout that arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.

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

  
    Ext.create('Ext.Panel', {
            width: 500,
            height: 400,
            title: "VBoxLayout Panel",
            layout: {
            type: 'vbox',
            align: 'center'
            },
            renderTo: document.body,
            items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            width: 250,
            flex: 2
            },
            {
            xtype: 'panel',
            title: 'Inner Panel Two',
            width: 250,
            flex: 4
            },
            {
            xtype: 'panel',
            title: 'Inner Panel Three',
            width: '50%',
            flex: 4
            }]
            });
            

Namespace: Ext.layout.container

Base Interfaces

Constructors

Fields

Name Description
align Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
  • left : Default child items are aligned horizontally at the left side of the container
  • center : child items are aligned horizontally at the mid-width of the container
  • stretch : child items are stretched horizontally to fill the width of the container
  • stretchmax : child items are stretched horizontally to the size of the largest item.
  • Defaults to: "left"
    © Copyright 2005-2011 SharpKit. All rights reserved.