Ext JS 4.1: Layouts, Performance, and API updates
-
Upload
sencha -
Category
Technology
-
view
5.483 -
download
1
description
Transcript of Ext JS 4.1: Layouts, Performance, and API updates
![Page 1: Ext JS 4.1: Layouts, Performance, and API updates](https://reader034.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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