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 Panels With Defined Heights ................................................... 33

18. HBox - Scrolling Inner Panels With Defined Widths .................................................... 35

19. VBox - Dynamic Container Height ............................................................................. 36

20. HBox - Dynamic Container Width .............................................................................. 37

21. ColumnLayout With autoScroll .................................................................................. 39

22. ColumnLayout With autoScroll And autoSize ............................................................. 40

23. Centering a Panel in a Viewport ............................................................................... 43

24. Centering a Panel in a Viewport - With Vertical Scrolling ............................................ 44

25. ................................................................................................................................ 45

26. BorderLayout in a Viewport - Region Scrolling ........................................................... 47

1

Ext JS Layout Guide

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.

Overview

This guide provides a detailed walk-through of the layout system built-into Ext JS 4. Layouts

control the size and position of user interface components within an Ext JS application. All the

Container Layout classes included in the Ext JS library will be explored along with examples

showing you how to use them. To make the most of this guide you should already have a copy

of the Ext JS library, know how to set up a basic application, and have some familiarity using

Containers and Panels.

The examples in this guide were written with a preview version of Ext JS 4 however all of the

concepts apply to both Ext JS 3 and 4.

Box Model Layout vs Sencha Layouts

If you have a background developing web applications with hand coded HTML/CSS then

you’re already familiar with the traditional box model layout system. Within the box model DIV

tags along with SECTION tags in HTML 5 become your primary means of containing items on

an HTML page. Once the markup representing your application is in place CSS controls the

layout and positioning of each component on the page. This is when the fun usually begins as

you start wrestling with margins, padding, floats, as well as the inevitable set of CSS hacks you

need to master in order to bring your interface to life on as many web browsers as possible.

Standard CSS layout features were born from traditional print layout

...