the ext js 4 layout system
DESCRIPTION
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.TRANSCRIPT
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