Ext JS 4 has a fully refactored layout engine with higher efficiency and performance. During this session, you'll learn all the in-depth details with a hands-on coding review of the updated ContainerLayouts and newly introduced ComponentLayouts.

2. Ext 4 Layouts

3. Layouts - How They Work

4. Layouts define how a container
sizes its child items.
Viewport
(Border)
West Center
(300px wide) (Remaining Space)

5. Visualizing a Layout Tree
Viewport
(Border)
West Center
(VBox) (TabPanel)
Tab 1 Tab 2
Navigation Settings
(VBox) (HBox)
Filter Form Grid Form A Form B

6. doLayout()
Ambiguous
Recursive by default
Often triggers other calls to doLayout()

7. Container Modification
Changing items in a container
Trigger a layout by default
Passed Arrays will only trigger a single layout
Behavior can be manually overridden

8. BoxLayout issues
Viewport
(Border)
Settings Navigation
(300px wide) (Flex 2)

9. AutoLayout issues
Panel
(HBox)
Panel Panel
(AutoLayout) (Flex 1)
HTML w/CSS

10. Layouts are Bidirectional
Viewport
(Border)
West Center
(VBox) (TabPanel)
Tab 1 Tab 2
Navigation Settings
(VBox) (HBox)
Filter Form Grid Form A Form B

11. 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.

12. Handling Visibility
Visibility checks are now recursive and avoid the DOM
Collapsed panels are considered visible, but their collapsed
content isn’t

13. Improving Flexibility

14. Component Layouts
Component 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

15. 3.x Panel Structure
el
Header
bodyWrap
tbar
Body
bbar
fbar

16. DockLayout
Headers are now true containers and are docked
tbar, bbar and fbar are deprecated and handled as docked
items
Tools are now true components

17. Ext 4 Panel w/DockLayout
el
Header (dock: top)
toolbar (dock: top)
Body
toolbar (dock: bottom)
toolbar (dock: bottom)

18. Ext 4 Panel w/DockLayout
el
toolbar (dock: top)
toolbar (dock: top)
Body
Header (dock: bottom)

19. Ext 4 Panel w/DockLayout
el
Header (dock: top)
toolbar
(dock: left)
Body

20. ToolbarLayout
Extends hbox/vbox
Supports horizontal and vertical toolbars
Versatile overflow methods

21. FieldLayout
Replaces FormLayout
Handles Label and Error display
el
formEl
labelEl
inputEl errorEl

22. TriggerFieldLayout
Extends FieldLayout
Accounts for triggerEl
el
formEl
labelEl
inputEl triggerEl errorEl

23. Improving Performance

24. Improving Performance
Firebug Profiler
Chrome SpeedTracer

25. Scaling Test: 500
TextFields - Ext 2.3.0

26. Using SpeedTracer

27. Scaling Test: 500
TextFields - 2.3.0
504 Layouts - 3094 ms

28. Redundant Reflow
Read Write Read Write Read Write
Margin Size Margin Size Margin Size
Read Read Read Write Write Write
Margin Margin Margin Size Size Size

29. Scaling Test: 500
TextFields - Ext 3.3.0

30. Scaling Test: 500
TextFields - Ext 3.3.0
502 Layouts - 2858 ms

31. adjustHeight()

32. Box Model: Defines how
Elements are measured
border
padding
content

33. Two di erent measurements
WC3
border
padding
content
Border Box Model (IE)

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

35. Scaling Test: 500
TextFields - Ext 4

36. Scaling Test: 500
TextFields - Ext 4+
6 Layouts -119 ms

37. Thank You!
@jamieavins