O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating flexible vertical layouts with VBoxes

The VBoxLayout allows you to align components vertically down a container. The following screenshot shows three panels vertically aligned, dividing the available space between them:

Creating flexible vertical layouts with VBoxes

How to do it...

  1. Start by creating a Viewport:
    Ext.create('Ext.container.Viewport', {});
  2. Define a layout for the Viewport with the following configuration:
    Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'vbox',
            align: 'stretch',
            padding: 10
        }
    });
  3. Finally add panels to the items collection and give them a height or flex configuration:
    Ext.create('Ext.container.Viewport', { layout: { type: 'vbox', align: 'stretch', animate: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required