More Related Content

More from Sencha(20)


The Ext JS 4 Layout System

  1. Ext 4 Layouts
  2. Layouts - How They Work
  3. Layouts define how a container sizes its child items. Viewport (Border) West Center (300px wide) (Remaining Space)
  4. 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
  5. doLayout() Ambiguous Recursive by default Often triggers other calls to doLayout()
  6. 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
  7. BoxLayout issues Viewport (Border) Settings Navigation (300px wide) (Flex 2)
  8. AutoLayout issues Panel (HBox) Panel Panel (AutoLayout) (Flex 1) HTML w/CSS
  9. Layouts are Bidirectional Viewport (Border) West Center (VBox) (TabPanel) Tab 1 Tab 2 Navigation Settings (VBox) (HBox) Filter Form Grid Form A Form B
  10. 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.
  11. Handling Visibility Visibility checks are now recursive and avoid the DOM Collapsed panels are considered visible, but their collapsed content isn’t
  12. Improving Flexibility
  13. 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
  14. 3.x Panel Structure el Header bodyWrap tbar Body bbar fbar
  15. 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
  16. Ext 4 Panel w/DockLayout el Header (dock: top) toolbar (dock: top) Body toolbar (dock: bottom) toolbar (dock: bottom)
  17. Ext 4 Panel w/DockLayout el toolbar (dock: top) toolbar (dock: top) Body Header (dock: bottom)
  18. Ext 4 Panel w/DockLayout el Header (dock: top) toolbar (dock: left) Body
  19. ToolbarLayout Extends hbox/vbox Supports horizontal and vertical toolbars Versatile overflow methods
  20. FieldLayout Replaces FormLayout Handles Label and Error display el formEl labelEl inputEl errorEl
  21. TriggerFieldLayout Extends FieldLayout Accounts for triggerEl el formEl labelEl inputEl triggerEl errorEl
  22. Improving Performance
  23. Improving Performance Firebug Profiler Chrome SpeedTracer
  24. Scaling Test: 500 TextFields - Ext 2.3.0
  25. Using SpeedTracer
  26. Scaling Test: 500 TextFields - 2.3.0 504 Layouts - 3094 ms
  27. 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
  28. Scaling Test: 500 TextFields - Ext 3.3.0
  29. Scaling Test: 500 TextFields - Ext 3.3.0 502 Layouts - 2858 ms
  30. adjustHeight()
  31. Box Model: Defines how Elements are measured border padding content
  32. Two di erent measurements WC3 border padding content Border Box Model (IE)
  33. 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
  34. Scaling Test: 500 TextFields - Ext 4
  35. Scaling Test: 500 TextFields - Ext 4+ 6 Layouts -119 ms
  36. Thank You! @jamieavins