the ext js 4 layout system

Ext 4 Layouts

Layouts - How They Work

Layouts define how a container sizes its child items.

Viewport(Border)

West(300px wide)

Center(Remaining Space)

Visualizing a Layout Tree

Viewport(Border)

West(VBox)

Navigation Settings

Center(TabPanel)

Tab 2(HBox)

Tab 1(VBox)

Filter Form Grid Form A Form B

doLayout()

AmbiguousRecursive by defaultOften triggers other calls to doLayout()

Container Modification

Changing items in a containerTrigger a layout by defaultPassed Arrays will only trigger a single layoutBehavior can be manually overridden

BoxLayout issues

Viewport(Border)

Settings(300px wide)

Navigation(Flex 2)

AutoLayout issues

Panel(HBox)

HTML w/CSS

Panel(AutoLayout)

Panel(Flex 1)

Layouts are BidirectionalViewport(Border)

West(VBox)

Navigation Settings

Center(TabPanel)

Tab 2(HBox)

Tab 1(VBox)

Filter Form Grid Form A Form B

Size Properties w/ Layouts

When a container sizes a component, that sizing is permanent.In Ext 4, layouts will no longer alter a component’s sizing properties.

Handling Visibility

Visibility checks are now recursive and avoid the DOMCollapsed panels are considered visible, but their collapsed content isn’t

Improving Flexibility

Component LayoutsComponent Layouts define how a component sizes its child items.Replaces static sequence of setting resizeEl, calling onResize(), and firing “resize” event.Easier to Extend and Customize how a component resizes

el

bodyWrap

3.x Panel Structure

tbar

Header

Body

bbarfbar

DockLayoutHeaders are now true containers and are dockedtbar, bbar and fbar are deprecated and handled as docked itemsTools are now true components

el

Ext 4 Panel w/DockLayout

toolbar (dock: top)Header (dock: top)

Body

toolbar (dock: bottom)toolbar (dock: bottom)

el

Ext 4 Panel w/DockLayout

toolbar (dock: top)

Header (dock: bottom)

Body

toolbar (dock: top)

el

Ext 4 Panel w/DockLayout

Header (dock: top)

Body

toolbar (dock: left)

ToolbarLayoutExtends hbox/vboxSupports horizontal and vertical toolbarsVersatile overflow methods

el

formEl

FieldLayout

labelEl inputEl errorEl

Replaces FormLayoutHandles Label and Error display

TriggerFieldLayout

el

formEllabelEl inputEl errorEltriggerEl

Extends FieldLayoutAccounts for triggerEl

Improving Performance

Improving Performance

Firebug ProfilerChrome SpeedTracer

Scaling Test: 500 TextFields - Ext 2.3.0

Using SpeedTracer

Scaling Test: 500 TextFields - 2.3.0

504 Layouts - 3094 ms

Redundant Reflow

Read Margin

Write Size

Read Margin

Write Size

Read Margin

Write Size

Read Margin

Write Size

Read Margin

Write Size

Read Margin

Write Size

Scaling Test: 500 TextFields - Ext 3.3.0

Scaling Test: 500 TextFields - Ext 3.3.0

502 Layouts - 2858 ms

adjustHeight()

Box Model: Defines how Elements are measuredborder

padding

content

Two di!erent measurementsWC3

Border Box Model (IE)

borderpadding

content

Unifying box modelsOne set of browsers have to do extra work to convert measurements.No extra calculations for IE6/7 in “quirks” modeExt 4/Sencha Mobile uses “box-sizing” CSS where available

Scaling Test: 500 TextFields - Ext 4

Scaling Test: 500 TextFields - Ext 4+

6 Layouts -119 ms

Thank You!

@jamieavins