ext js 4.1: layouts, performance, and api updates
DESCRIPTION
Improving layout and rendering performance is a major focus of Ext JS 4.1. This session will discuss some of these details and how they might impact your application, custom components and custom layouts. Beyond these largely invisible features, Ext JS 4.1 has other exciting enhancements. We will also cover: improvements to Grid, Border layout, XTemplate, Data and the class system.TRANSCRIPT
![Page 1: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/1.jpg)
Wednesday, November 2, 2011
![Page 2: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/2.jpg)
What’s New
Don Griffin
EXT JS 4.1
Wednesday, November 2, 2011
![Page 3: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/3.jpg)
dongryphon
Forum
Wednesday, November 2, 2011
![Page 4: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/4.jpg)
@dongryphon
Wednesday, November 2, 2011
![Page 5: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/5.jpg)
Wednesday, November 2, 2011
![Page 6: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/6.jpg)
Focus Areas
Wednesday, November 2, 2011
![Page 7: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/7.jpg)
Performance
Grid
API Enhancements
Wednesday, November 2, 2011
![Page 8: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/8.jpg)
Performance
Wednesday, November 2, 2011
![Page 9: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/9.jpg)
Many Aspects
Wednesday, November 2, 2011
![Page 10: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/10.jpg)
Many Aspects
DOMlayout
renderinginitialization
DOM
DOM
load
Wednesday, November 2, 2011
![Page 11: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/11.jpg)
Many Aspects
DOMlayout
renderinginitialization
ajax
security
validation
database
DOM
DOM
DOMload
Wednesday, November 2, 2011
![Page 12: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/12.jpg)
Measurement Required
Wednesday, November 2, 2011
![Page 13: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/13.jpg)
Measurement Required
Chrome: Profiler, Speed TracerFirefox: dynaTrace, FirebugIE: dynaTrace, IE8+ ProfilerSafari: Developer Tools Profiler
Wednesday, November 2, 2011
![Page 14: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/14.jpg)
Themes Example - 4.0.7 (IE8)
Wednesday, November 2, 2011
![Page 15: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/15.jpg)
Themes Example - 4.0.7 (IE8)
4.0.7
Wednesday, November 2, 2011
![Page 16: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/16.jpg)
Themes Example - 4.0.7 (IE8)
6%
Load 300
4.0.7
Wednesday, November 2, 2011
![Page 17: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/17.jpg)
Themes Example - 4.0.7 (IE8)
6%
7%
Load
Initialize
300
320
4.0.7
Wednesday, November 2, 2011
![Page 18: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/18.jpg)
Themes Example - 4.0.7 (IE8)
6%
7%
36%
Load
Initialize
Rendering
300
320
16804.0.7
Wednesday, November 2, 2011
![Page 19: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/19.jpg)
Themes Example - 4.0.7 (IE8)
6%
7%
36%
51%
Load
Initialize
Rendering
Layout 300
320
1680
2400
4.0.7
4700
Wednesday, November 2, 2011
![Page 20: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/20.jpg)
Analysis
Wednesday, November 2, 2011
![Page 21: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/21.jpg)
Cost is spread across
the Page Life Cycle
Wednesday, November 2, 2011
![Page 22: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/22.jpg)
Cost is spread across
the Page Life Cycle
Wednesday, November 2, 2011
![Page 23: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/23.jpg)
Cost is spread across
the Page Life Cycle
Initialize Render LayoutLoad
Wednesday, November 2, 2011
![Page 24: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/24.jpg)
Load
Wednesday, November 2, 2011
![Page 25: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/25.jpg)
<script src=”ext.js”>
Wednesday, November 2, 2011
![Page 26: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/26.jpg)
Class System
Wednesday, November 2, 2011
![Page 27: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/27.jpg)
DOM Ready
Wednesday, November 2, 2011
![Page 28: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/28.jpg)
Initialize
Load
Wednesday, November 2, 2011
![Page 29: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/29.jpg)
onReady
Wednesday, November 2, 2011
![Page 30: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/30.jpg)
initComponent
Wednesday, November 2, 2011
![Page 31: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/31.jpg)
prepareItems
Wednesday, November 2, 2011
![Page 32: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/32.jpg)
Themes - Ext JS 3.4
Wednesday, November 2, 2011
![Page 33: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/33.jpg)
148 componentsin
50 containers
Themes - Ext JS 3.4
Wednesday, November 2, 2011
![Page 34: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/34.jpg)
Themes - Ext JS 4.x
Wednesday, November 2, 2011
![Page 35: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/35.jpg)
148 271 componentsin
50 97 containers
Themes - Ext JS 4.x
Wednesday, November 2, 2011
![Page 36: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/36.jpg)
More flexibility
Wednesday, November 2, 2011
![Page 37: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/37.jpg)
Components& Containershave a cost
Wednesday, November 2, 2011
![Page 38: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/38.jpg)
Observableslisteners
fireEvents
Wednesday, November 2, 2011
![Page 39: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/39.jpg)
Rendering
Load Initialize
Wednesday, November 2, 2011
![Page 40: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/40.jpg)
Wednesday, November 2, 2011
![Page 41: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/41.jpg)
Components HTML
Wednesday, November 2, 2011
![Page 42: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/42.jpg)
comp
container
panel
Wednesday, November 2, 2011
![Page 43: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/43.jpg)
comp
container
panel
comp
container
panelel
render
Wednesday, November 2, 2011
![Page 44: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/44.jpg)
Rendering in 4.0
Wednesday, November 2, 2011
![Page 45: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/45.jpg)
Wednesday, November 2, 2011
![Page 46: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/46.jpg)
comp
container
panelrender
onRender
Wednesday, November 2, 2011
![Page 47: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/47.jpg)
comp
container
panelel
render
onRender
createElement
Wednesday, November 2, 2011
![Page 48: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/48.jpg)
comp
container
panelel
render
onRender
createElement
renderTpl
Wednesday, November 2, 2011
![Page 49: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/49.jpg)
comp
container
panelel
render
onRender
createElement
renderTpl
renderSelectors
Wednesday, November 2, 2011
![Page 50: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/50.jpg)
comp
container
panelel
render
onRender
createElement
renderTpl
renderSelectors
afterRender
Wednesday, November 2, 2011
![Page 51: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/51.jpg)
comp
container
panelel
createElement
renderTpl
afterRender
onRender
render
renderSelectors
Wednesday, November 2, 2011
![Page 52: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/52.jpg)
Rendering in 4.1
Wednesday, November 2, 2011
![Page 53: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/53.jpg)
Wednesday, November 2, 2011
![Page 54: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/54.jpg)
comp
container
panel
renderTpl
beforeRender
render
Wednesday, November 2, 2011
![Page 55: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/55.jpg)
comp
container
panel
renderTpl
beforeRender
render
Wednesday, November 2, 2011
![Page 56: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/56.jpg)
comp
container
panelel
renderTpl
beforeRender
render
innerHTML
Wednesday, November 2, 2011
![Page 57: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/57.jpg)
comp
container
panelel
renderTpl
beforeRender
render
innerHTML
onRender
Wednesday, November 2, 2011
![Page 58: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/58.jpg)
comp
container
panelel
renderTpl
beforeRender
render
innerHTML
onRender
renderSelectors
afterRender
Wednesday, November 2, 2011
![Page 59: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/59.jpg)
comp
container
panelel
renderTpl
beforeRender
render
innerHTML
onRender
renderSelectors
afterRender
Wednesday, November 2, 2011
![Page 60: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/60.jpg)
Layout
RenderLoad Initialize
Wednesday, November 2, 2011
![Page 61: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/61.jpg)
A Place For Everything
and
Everything In Its Place
Wednesday, November 2, 2011
![Page 62: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/62.jpg)
Layout Example
Wednesday, November 2, 2011
![Page 63: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/63.jpg)
Ext.widget({ xtype: ‘panel’, layout: ‘fit’, title: ‘Text’, items: [{ xtype: ‘component’, html: ‘foo’, width: 100, height: 100 }]});
Wednesday, November 2, 2011
![Page 64: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/64.jpg)
Ext.widget({ xtype: ‘panel’, layout: ‘fit’, title: ‘Text’, items: [{ xtype: ‘component’, html: ‘foo’, width: 100, height: 100 }]});
Ext.widget({ xtype: ‘panel’, layout: ‘fit’, dockedItems: [{ xtype: ‘header’, text: ‘Text’, dock: ‘top’ }], items: [{ xtype: ‘component’, html: ‘foo’, width: 100, height: 100 }]});
Wednesday, November 2, 2011
![Page 65: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/65.jpg)
Text
foo
Wednesday, November 2, 2011
![Page 66: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/66.jpg)
Text
foo
Wednesday, November 2, 2011
![Page 67: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/67.jpg)
Text
foo
Wednesday, November 2, 2011
![Page 68: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/68.jpg)
Text
fooha
wa
Wednesday, November 2, 2011
![Page 69: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/69.jpg)
Text
fooha
wa
Wednesday, November 2, 2011
![Page 70: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/70.jpg)
Text
fooha
wa
wb = wa
Wednesday, November 2, 2011
![Page 71: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/71.jpg)
Text
fooha
hb
wa
wb = wa
Wednesday, November 2, 2011
![Page 72: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/72.jpg)
Text
fooha
hb
wa
wb = wa
Wednesday, November 2, 2011
![Page 73: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/73.jpg)
Text
fooha
hb
hc
= ha+hb
+fc
wawc = wa + fc
wb = wa
Wednesday, November 2, 2011
![Page 74: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/74.jpg)
First Rule of Speed
Wednesday, November 2, 2011
![Page 75: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/75.jpg)
Wednesday, November 2, 2011
![Page 76: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/76.jpg)
C$$Calculations
Are Expensive
Wednesday, November 2, 2011
![Page 77: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/77.jpg)
Wednesday, November 2, 2011
![Page 78: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/78.jpg)
... therefore ...
Wednesday, November 2, 2011
![Page 79: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/79.jpg)
Wednesday, November 2, 2011
![Page 80: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/80.jpg)
Browsers Cache Results*
Wednesday, November 2, 2011
![Page 81: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/81.jpg)
Browsers Cache Results*
* - DOM Writes Invalidate The Cache !Wednesday, November 2, 2011
![Page 82: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/82.jpg)
Write + Read = Reflow
Wednesday, November 2, 2011
![Page 83: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/83.jpg)
Second Rule of Speed
Wednesday, November 2, 2011
![Page 84: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/84.jpg)
Apps Have MoreThan
One Panel!
Wednesday, November 2, 2011
![Page 85: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/85.jpg)
comp
container
panelel
Wednesday, November 2, 2011
![Page 86: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/86.jpg)
comp
container
panelel
component (3.x)
Wednesday, November 2, 2011
![Page 87: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/87.jpg)
comp
container
panelel
component (3.x)container (4.0)
Wednesday, November 2, 2011
![Page 88: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/88.jpg)
comp
container
panelel
component (3.x)container (4.0)global (4.1)
layoutcontext
Wednesday, November 2, 2011
![Page 89: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/89.jpg)
Minimizing Reflowsvar maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
Wednesday, November 2, 2011
![Page 90: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/90.jpg)
Minimizing Reflowsvar maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
n+1 reflows
Wednesday, November 2, 2011
![Page 91: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/91.jpg)
var maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w);}
for (i=0; i < n; ++i) { maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
Minimizing Reflowsvar maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
n+1 reflows
Wednesday, November 2, 2011
![Page 92: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/92.jpg)
var maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w);}
for (i=0; i < n; ++i) { maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
Minimizing Reflowsvar maxHt = 0, n = elements.length, i;
for (i=0; i < n; ++i) { elements[i].setWidth(w); maxHt = Math.max(maxHt, elements[i].getHeight());}
for (i=0; i < n; ++i) { elements[i].setHeight(maxHt);}
n+1 reflows 2 reflows
Wednesday, November 2, 2011
![Page 93: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/93.jpg)
More Opportunities
Wednesday, November 2, 2011
![Page 94: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/94.jpg)
Leverage Layout Dependency Data
Wednesday, November 2, 2011
![Page 95: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/95.jpg)
Cache Layout Results
Wednesday, November 2, 2011
![Page 96: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/96.jpg)
Themes Example - 4.1 (IE8)
Wednesday, November 2, 2011
![Page 97: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/97.jpg)
Themes Example - 4.1 (IE8)
4.0.7 4.1
Wednesday, November 2, 2011
![Page 98: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/98.jpg)
Themes Example - 4.1 (IE8)
8%
Load 300200
4.0.7 4.1
Wednesday, November 2, 2011
![Page 99: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/99.jpg)
Themes Example - 4.1 (IE8)
8%
10%
Load
Initialization
300200
320240
4.0.7 4.1
Wednesday, November 2, 2011
![Page 100: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/100.jpg)
Themes Example - 4.1 (IE8)
8%
10%
43%
Load
Initialization
Rendering
300200
320240
16801035
4.0.7 4.1
Wednesday, November 2, 2011
![Page 101: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/101.jpg)
Themes Example - 4.1 (IE8)
8%
10%
43%
39% Load
Initialization
Rendering
Layout 300200
320240
16801035
2400945
4.0.7 4.1
4700
2420
Wednesday, November 2, 2011
![Page 102: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/102.jpg)
Significantly faster than 4.0 !
Wednesday, November 2, 2011
![Page 103: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/103.jpg)
But not faster than 3.4...
Wednesday, November 2, 2011
![Page 104: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/104.jpg)
But not faster than 3.4...
Yet
Wednesday, November 2, 2011
![Page 105: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/105.jpg)
Further Investigation
Wednesday, November 2, 2011
![Page 106: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/106.jpg)
Convert Layouts into CSS... where possible
Optimize Class Creation
Optimize DOM Event Binding
Further Investigation
Wednesday, November 2, 2011
![Page 107: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/107.jpg)
Grid
Wednesday, November 2, 2011
![Page 108: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/108.jpg)
NativeScrolling!
Wednesday, November 2, 2011
![Page 109: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/109.jpg)
NativeScrolling!
momentum
friction
acceleration
Wednesday, November 2, 2011
![Page 110: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/110.jpg)
What CouldBe Better?!?
Wednesday, November 2, 2011
![Page 111: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/111.jpg)
NativeScrolling
withBuffering!
Wednesday, November 2, 2011
![Page 112: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/112.jpg)
Is There More?
Wednesday, November 2, 2011
![Page 113: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/113.jpg)
NativeInfinite
Scrolling!
Wednesday, November 2, 2011
![Page 114: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/114.jpg)
But Wait...
Wednesday, November 2, 2011
![Page 115: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/115.jpg)
OptimizedColumn
Reordering
Wednesday, November 2, 2011
![Page 116: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/116.jpg)
Store metadata
Wednesday, November 2, 2011
![Page 117: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/117.jpg)
API Enhancements
Wednesday, November 2, 2011
![Page 118: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/118.jpg)
Border Layout
Wednesday, November 2, 2011
![Page 119: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/119.jpg)
Multiple regions
Wednesday, November 2, 2011
![Page 120: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/120.jpg)
Multiple regions
North
South
West
East
Wednesday, November 2, 2011
![Page 121: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/121.jpg)
Multiple regions
North
South
West
East
West
East
ofthe same type
Wednesday, November 2, 2011
![Page 122: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/122.jpg)
Control
Space Priority
Wednesday, November 2, 2011
![Page 123: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/123.jpg)
Control
Space Priority
West
East
Wednesday, November 2, 2011
![Page 124: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/124.jpg)
Control
Space Priority
North
South
West
East
West
East
Wednesday, November 2, 2011
![Page 125: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/125.jpg)
Regions can be
added and removed
dynamically
Wednesday, November 2, 2011
![Page 126: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/126.jpg)
XTemplate
Wednesday, November 2, 2011
![Page 127: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/127.jpg)
Foundational to
Ext JS
Wednesday, November 2, 2011
![Page 128: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/128.jpg)
XTemplate
Wednesday, November 2, 2011
![Page 129: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/129.jpg)
compiles faster...runs faster...
is debuggable...
XTemplate
Wednesday, November 2, 2011
![Page 130: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/130.jpg)
compiles faster...runs faster...
is debuggable...and more powerful!
XTemplate
Wednesday, November 2, 2011
![Page 131: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/131.jpg)
Compiles To A Function
Wednesday, November 2, 2011
![Page 132: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/132.jpg)
<tpl> <ul> <tpl for=”x”> <li>{fname} <tpl if=”lname”> {lname} <tpl else> (None) </tpl> </li> </tpl> </ul></tpl>
Wednesday, November 2, 2011
![Page 133: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/133.jpg)
<tpl> <ul> <tpl for=”x”> <li>{fname} <tpl if=”lname”> {lname} <tpl else> (None) </tpl> </li> </tpl> </ul></tpl>
function tplFn (out, values..) { out.push(’<ul>’); for (var n in values.x) { var v2 = values.x[n]; out.push(’<li>’); out.push(v2.fname); if (v2.lname) { out.push(v2.lname); } else { out.push(‘(None)’); } } out.push(‘</li>’); } out.push(‘</ul>’);}
Wednesday, November 2, 2011
![Page 134: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/134.jpg)
Control Structures
Wednesday, November 2, 2011
![Page 135: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/135.jpg)
<tpl if="age == 3"> {x}<tpl elseif=”age == 2”> {y}<tpl else> {z}</tpl>
Wednesday, November 2, 2011
![Page 136: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/136.jpg)
<tpl switch="age"> <tpl case="3" case="4"> <p>{name} is 3 or 4</p> <tpl case="2"> <p>{name} is two</p> <tpl default> <p>{name} is {age}!</p></tpl>
Wednesday, November 2, 2011
![Page 137: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/137.jpg)
Code Injection
Wednesday, November 2, 2011
![Page 138: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/138.jpg)
<tpl> {% var i=0; %} <tpl for=”x”> {name} {% if (++i==9) break; %} </tpl></tpl>
Wednesday, November 2, 2011
![Page 139: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/139.jpg)
<tpl> {% var i=0; %} <tpl for=”x”> {name} {% if (++i==9) break; %} </tpl></tpl>
function tplFn (out, values..) { var i=0; for (var n in values.x) { out.push(v2.name); if (++i == 9) break; }}
Wednesday, November 2, 2011
![Page 140: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/140.jpg)
applyOut
Wednesday, November 2, 2011
![Page 141: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/141.jpg)
var tpl = new Ext.XTemplate(...);
// This:
var s = tpl.apply(data);
// is equivalent to:
var a = [];tpl.applyOut(a, data);s = a.join(‘’);
Wednesday, November 2, 2011
![Page 142: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/142.jpg)
Class System
Wednesday, November 2, 2011
![Page 143: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/143.jpg)
Overrides
Ext.define(‘My.patches.GridOverride’, {
override: ‘Ext.grid.Panel’,
initComponent: function () { this.callParent(); }});
-------------------
Ext.define(‘My.app.App’, { requires: [ ‘My.patches.*’ ], ...});
Wednesday, November 2, 2011
![Page 144: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/144.jpg)
Overrides
Ext.define(‘My.patches.GridOverride’, {
override: ‘Ext.grid.Panel’,
initComponent: function () { this.callParent(); }});
-------------------
Ext.define(‘My.app.App’, { requires: [ ‘My.patches.*’ ], ...});
Named and used like a normal class
Wednesday, November 2, 2011
![Page 145: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/145.jpg)
Overrides
Ext.define(‘My.patches.GridOverride’, {
override: ‘Ext.grid.Panel’,
initComponent: function () { this.callParent(); }});
-------------------
Ext.define(‘My.app.App’, { requires: [ ‘My.patches.*’ ], ...});
Named and used like a normal class
Only added to the build if the target class is required
Wednesday, November 2, 2011
![Page 146: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/146.jpg)
Ext.create/widget
Ext.create(‘Ext.grid.Panel’, {
... config ...
});
// or
Ext.widget(‘grid’, {
... config ...
});
4.0
Wednesday, November 2, 2011
![Page 147: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/147.jpg)
Ext.create/widget
Ext.create(‘Ext.grid.Panel’, {
... config ...
});
// or
Ext.widget(‘grid’, {
... config ...
});
Ext.create({ xclass: ‘Ext.grid.Panel’,
... config ...});
// or
Ext.widget({ xtype: ‘grid’.,
... config ...});
4.0 4.1
Wednesday, November 2, 2011
![Page 148: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/148.jpg)
Methods in configs - 4.0
items: [ { xtype: ‘foo’,
method: function (a) { return }}]
Ext.foo.Bar.prototype.method.call(this, a*2);a*2;
Wednesday, November 2, 2011
![Page 149: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/149.jpg)
Methods in configs - 4.0
items: [ { xtype: ‘foo’,
method: function (a) { return }}]
Messy if you need to call original method!
Ext.foo.Bar.prototype.method.call(this, a*2);a*2;
Wednesday, November 2, 2011
![Page 150: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.vdocument.in/reader034/viewer/2022052410/5555ababd8b42a52568b4934/html5/thumbnails/150.jpg)
xhooks
items: [ { xtype: ‘foo’,
xhooks: { method: function (a) { return this.callParent([a * 2]); } }}]
Wednesday, November 2, 2011