Absolute Layout

Ext JS 4 Layouts Guide

David Feinberg

Copyright © 2011 Sencha, Inc. All rights reserved.

Pre-Release Content

All the content in this guide is based on a early pre-release version of Ext JS 4. The concepts and code

examples presented in this guide may not be applicable to the final release.

iii

Table of Contents

Ext JS Layout Guide ........................................................................................................ 1

............................................................................................................................... 1

Overview ................................................................................................................. 1

Box Model Layout vs Sencha Layouts ...................................................................... 1

What's a Sencha Layout? ........................................................................................ 1

Overview of Container Layouts ................................................................................. 2

Absolute .......................................................................................................... 2

Anchor ............................................................................................................ 2

Auto ................................................................................................................ 3

Border ............................................................................................................. 3

Card ................................................................................................................ 3

Column ........................................................................................................... 4

Fit ................................................................................................................... 4

HBox ............................................................................................................... 4

VBox ............................................................................................................... 5

Table ............................................................................................................... 5

Examples of Container Layouts ................................................................................ 6

AbsoluteLayout in Action .................................................................................. 6

AnchorLayout in Action .................................................................................... 8

AutoLayout in Action ...................................................................................... 10

FitLayout in Action ......................................................................................... 11

CardLayout in Action ...................................................................................... 12

HBoxLayout in Action ..................................................................................... 14

VBoxLayout in Action ..................................................................................... 16

ColumnLayout in Action ................................................................................. 18

TableLayout in Action ..................................................................................... 20

BorderLayout in Action ................................................................................... 22

Layout Tips ............................................................................................................ 25

Default Layout ............................................................................................... 25

When to Call doLayout ................................................................................... 25

Scrolling and Dynamic Container Sizing .................................................................. 26

Scrolling AutoLayout - Containers and Panels ................................................. 26

Scrolling VBox and HBoxLayouts .................................................................... 31

Scrolling ColumnLayout .................................................................................. 39

The Unscrollables - Fit, Card and BorderLayouts ............................................. 42

Scrolling Applications - Viewport ..................................................................... 42

ColumnLayout in a Viewport - With Vertical Scrolling ........................................ 45

Scrolling Applications - BorderLayout .............................................................. 47

iv

List of Figures

1. Two Inner Panels Absolutely Positioned in a Containing Panel ....................................... 6

2. Three Inner Panels Anchored to a Containing Panel ...................................................... 8

3. Two Inner Panels Inside a Containing Panel Using AutoLayout ..................................... 10

4. Inner Panel Inside a Containing Panel Using FitLayout ................................................. 11

5. Wizard Style Panels Using CardLayout ....................................................................... 12

6. Three Panels Inside a Containing Panel Using HBoxLayout .......................................... 14

7. Three Panels Inside a Containing Panel Using VBoxLayout .......................................... 16

8. Three Panels Inside a Containing Panel Using ColumnLayout ...................................... 18

9. Panels Inside a Container Using TableLayout .............................................................. 20

10. Viewport Using the BorderLayout .............................................................................. 23

11. AutoLayout - Scrolling Nested Panels with a Title Bar ................................................ 26

12. AutoLayout - Scrolling a Panel Inside a Container ...................................................... 27

13. AutoLayout - Scrolling Nested Panels Without a Title Bar ........................................... 28

14. AutoLayout - Dynamic Container Height .................................................................... 29

15. VBox - Inner Panels with Defined Heights ................................................................. 31

16. HBox - Inner Panels with Defined Widths .................................................................. 32

17. VBox - Scrolling Inner

...