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.
4. Layouts deïŹne 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
7. Container ModiïŹcation
Changing items in a container
Trigger a layout by default
Passed Arrays will only trigger a single layout
Behavior can be manually overridden
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
14. Component Layouts
Component Layouts deïŹne how a component sizes its child
items.
Replaces static sequence of setting resizeEl, calling onResize(),
and ïŹring âresizeâ event.
Easier to Extend and Customize how a component resizes
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
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