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
![Page 1: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/1.jpg)
![Page 2: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/2.jpg)
Ext 4 Layouts
![Page 3: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/3.jpg)
Layouts - How They Work
![Page 4: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/4.jpg)
Layouts define how a container sizes its child items.
Viewport(Border)
West(300px wide)
Center(Remaining Space)
![Page 5: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/5.jpg)
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
![Page 6: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/6.jpg)
doLayout()
AmbiguousRecursive by defaultOften triggers other calls to doLayout()
![Page 7: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/7.jpg)
Container Modification
Changing items in a containerTrigger a layout by defaultPassed Arrays will only trigger a single layoutBehavior can be manually overridden
![Page 8: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/8.jpg)
BoxLayout issues
Viewport(Border)
Settings(300px wide)
Navigation(Flex 2)
![Page 9: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/9.jpg)
AutoLayout issues
Panel(HBox)
HTML w/CSS
Panel(AutoLayout)
Panel(Flex 1)
![Page 10: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/10.jpg)
Layouts are BidirectionalViewport(Border)
West(VBox)
Navigation Settings
Center(TabPanel)
Tab 2(HBox)
Tab 1(VBox)
Filter Form Grid Form A Form B
![Page 11: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/11.jpg)
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.
![Page 12: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/12.jpg)
Handling Visibility
Visibility checks are now recursive and avoid the DOMCollapsed panels are considered visible, but their collapsed content isn’t
![Page 13: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/13.jpg)
Improving Flexibility
![Page 14: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/14.jpg)
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
![Page 15: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/15.jpg)
el
bodyWrap
3.x Panel Structure
tbar
Header
Body
bbarfbar
![Page 16: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/16.jpg)
DockLayoutHeaders are now true containers and are dockedtbar, bbar and fbar are deprecated and handled as docked itemsTools are now true components
![Page 17: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/17.jpg)
el
Ext 4 Panel w/DockLayout
toolbar (dock: top)Header (dock: top)
Body
toolbar (dock: bottom)toolbar (dock: bottom)
![Page 18: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/18.jpg)
el
Ext 4 Panel w/DockLayout
toolbar (dock: top)
Header (dock: bottom)
Body
toolbar (dock: top)
![Page 19: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/19.jpg)
el
Ext 4 Panel w/DockLayout
Header (dock: top)
Body
toolbar (dock: left)
![Page 20: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/20.jpg)
ToolbarLayoutExtends hbox/vboxSupports horizontal and vertical toolbarsVersatile overflow methods
![Page 21: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/21.jpg)
el
formEl
FieldLayout
labelEl inputEl errorEl
Replaces FormLayoutHandles Label and Error display
![Page 22: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/22.jpg)
TriggerFieldLayout
el
formEllabelEl inputEl errorEltriggerEl
Extends FieldLayoutAccounts for triggerEl
![Page 23: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/23.jpg)
Improving Performance
![Page 24: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/24.jpg)
Improving Performance
Firebug ProfilerChrome SpeedTracer
![Page 25: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/25.jpg)
Scaling Test: 500 TextFields - Ext 2.3.0
![Page 26: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/26.jpg)
Using SpeedTracer
![Page 27: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/27.jpg)
Scaling Test: 500 TextFields - 2.3.0
504 Layouts - 3094 ms
![Page 28: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/28.jpg)
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
![Page 29: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/29.jpg)
Scaling Test: 500 TextFields - Ext 3.3.0
![Page 30: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/30.jpg)
Scaling Test: 500 TextFields - Ext 3.3.0
502 Layouts - 2858 ms
![Page 31: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/31.jpg)
adjustHeight()
![Page 32: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/32.jpg)
Box Model: Defines how Elements are measuredborder
padding
content
![Page 33: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/33.jpg)
Two di!erent measurementsWC3
Border Box Model (IE)
borderpadding
content
![Page 34: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/34.jpg)
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
![Page 35: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/35.jpg)
Scaling Test: 500 TextFields - Ext 4
![Page 36: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/36.jpg)
Scaling Test: 500 TextFields - Ext 4+
6 Layouts -119 ms
![Page 37: The Ext JS 4 Layout System](https://reader031.vdocuments.us/reader031/viewer/2022020217/54b3da204a7959f1108b4623/html5/thumbnails/37.jpg)
Thank You!
@jamieavins