The Ext JS 4 Layout System

17,854 views
17,531 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,854
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
252
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Ext JS 4 Layout System

  1. 1. Ext 4 Layouts
  2. 2. Layouts - How They Work
  3. 3. Layouts define how a container sizes its child items. Viewport (Border) West Center (300px wide) (Remaining Space)
  4. 4. Visualizing a Layout Tree Viewport (Border) West Center (VBox) (TabPanel) Tab 1 Tab 2Navigation Settings (VBox) (HBox) Filter Form Grid Form A Form B
  5. 5. doLayout()AmbiguousRecursive by defaultOften triggers other calls to doLayout()
  6. 6. Container ModificationChanging items in a containerTrigger a layout by defaultPassed Arrays will only trigger a single layoutBehavior can be manually overridden
  7. 7. BoxLayout issues Viewport (Border) Settings Navigation (300px wide) (Flex 2)
  8. 8. AutoLayout issues Panel (HBox) Panel Panel (AutoLayout) (Flex 1) HTML w/CSS
  9. 9. Layouts are Bidirectional Viewport (Border) West Center (VBox) (TabPanel) Tab 1 Tab 2Navigation Settings (VBox) (HBox) Filter Form Grid Form A Form B
  10. 10. Size Properties w/ LayoutsWhen a container sizes a component, that sizing is permanent.In Ext 4, layouts will no longer alter a component’s sizingproperties.
  11. 11. Handling VisibilityVisibility checks are now recursive and avoid the DOMCollapsed panels are considered visible, but their collapsedcontent isn’t
  12. 12. Improving Flexibility
  13. 13. Component LayoutsComponent Layouts define how a component sizes its childitems.Replaces static sequence of setting resizeEl, calling onResize(),and firing “resize” event.Easier to Extend and Customize how a component resizes
  14. 14. 3.x Panel Structureel Header bodyWrap tbar Body bbar fbar
  15. 15. DockLayoutHeaders are now true containers and are dockedtbar, bbar and fbar are deprecated and handled as dockeditemsTools are now true components
  16. 16. Ext 4 Panel w/DockLayoutel Header (dock: top) toolbar (dock: top) Body toolbar (dock: bottom) toolbar (dock: bottom)
  17. 17. Ext 4 Panel w/DockLayoutel toolbar (dock: top) toolbar (dock: top) Body Header (dock: bottom)
  18. 18. Ext 4 Panel w/DockLayoutel Header (dock: top) toolbar (dock: left) Body
  19. 19. ToolbarLayoutExtends hbox/vboxSupports horizontal and vertical toolbarsVersatile overflow methods
  20. 20. FieldLayoutReplaces FormLayoutHandles Label and Error display el formEl labelEl inputEl errorEl
  21. 21. TriggerFieldLayoutExtends FieldLayoutAccounts for triggerEl el formEl labelEl inputEl triggerEl errorEl
  22. 22. Improving Performance
  23. 23. Improving PerformanceFirebug ProfilerChrome SpeedTracer
  24. 24. Scaling Test: 500TextFields - Ext 2.3.0
  25. 25. Using SpeedTracer
  26. 26. Scaling Test: 500TextFields - 2.3.0 504 Layouts - 3094 ms
  27. 27. Redundant ReflowRead Write Read Write Read WriteMargin Size Margin Size Margin SizeRead Read Read Write Write WriteMargin Margin Margin Size Size Size
  28. 28. Scaling Test: 500TextFields - Ext 3.3.0
  29. 29. Scaling Test: 500TextFields - Ext 3.3.0 502 Layouts - 2858 ms
  30. 30. adjustHeight()
  31. 31. Box Model: Defines howElements are measuredborder padding content
  32. 32. Two di erent measurements WC3 border padding content Border Box Model (IE)
  33. 33. Unifying box modelsOne set of browsers have to do extra work to convertmeasurements.No extra calculations for IE6/7 in “quirks” modeExt 4/Sencha Mobile uses “box-sizing” CSS where available
  34. 34. Scaling Test: 500TextFields - Ext 4
  35. 35. Scaling Test: 500TextFields - Ext 4+ 6 Layouts -119 ms
  36. 36. Thank You! @jamieavins

×