ext js 4: advanced expert techniques
DESCRIPTION
This session will take a detailed look into a variety of internal and less known properties of Ext JS. Topics range from component lifecycles to properties such as renderTpl, renderSelectors, childEls, renderData, and mon. Other topics include delegated events (where the framework utilizes it, and where you should be using them in your code) and many useful utility classes like MixedCollection, DelayedTask, TaskRunner, and more.Rich Waters is the Chief Application Architect & Founder at Extnd LLC. Rich has been working with Ext JS since the very beginning and was a core developer for versions 1.x through 3.x. He now focuses on instructing courses & helping companies implement Ext JS & Sencha Touch solutionsTRANSCRIPT
![Page 1: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/1.jpg)
Ext JS 4: Advanced Expert Techniques
Rich Waters
SenchaCon - 10/25/11
Wednesday, November 2, 11
![Page 2: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/2.jpg)
About Me
Chief Application Architect & Founder @ Extnd LLC
Ext JS Developer since 2006
YUI-Ext 0.3.x
Javascript, Ext JS & Sencha Touch Instructor
Ext 2.x - 4.x, Touch 1.x (2.x soon!)
Wednesday, November 2, 11
![Page 3: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/3.jpg)
Components
{con!g}
Wednesday, November 2, 11
![Page 4: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/4.jpg)
Wednesday, November 2, 11
![Page 5: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/5.jpg)
Wednesday, November 2, 11
![Page 6: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/6.jpg)
Component LifecycleInitialization
Destruction
Rendering
Wednesday, November 2, 11
![Page 7: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/7.jpg)
Intialization Overview
Instantiate Class
Parse & Apply Con!gurations
De!ne Events
[Container] Initialize items
Wednesday, November 2, 11
![Page 8: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/8.jpg)
Instantiate Class
Ext.ClassManager.instantiate (Ext.create)
Locate class [lookup xtype]
Fires Synchronous load call if not present
Call class constructor
Wednesday, November 2, 11
![Page 9: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/9.jpg)
ConstructorNot just traditional con!g object
con!g.initialCon!g
con!g.tagName || con!g.dom
Ext.apply {con!g}
addEvents
Generate id
call initComponent
Wednesday, November 2, 11
![Page 10: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/10.jpg)
initComponent
Initialize event listeners
Enable bubbleEvents
[Container] initItems
Create items MixedCollection
Recurse add on items
Wednesday, November 2, 11
![Page 11: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/11.jpg)
[Container] add
Apply defaults
Lookup or Create component
Event: beforeadd
Call onBeforeAdd
Inject component into items MixedCollection
Wednesday, November 2, 11
![Page 12: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/12.jpg)
[Container] add
Call child Component.onAdded
Event: added
Call onAdd
Event: add
Wednesday, November 2, 11
![Page 13: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/13.jpg)
Constructor
Register with ComponentManager
Initialize Obserable/State mixins
Initialize plugins
Call renderTo / autoShow
Wednesday, November 2, 11
![Page 14: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/14.jpg)
Rendering Overview
Generate DOM using XTemplate
Insert DOM Nodes
Gather DOM references
Calculate layouts
Wednesday, November 2, 11
![Page 15: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/15.jpg)
Render
Event: beforerender
Get container reference (if any)
Call onRender
Wednesday, November 2, 11
![Page 16: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/16.jpg)
onRender
Initialize inline styles/padding/margin
Build DOM (autoEl)
Append DOM to page
IE frame con!g support (wrap with tr/tc/tl/mr/mc/etc.)
Wednesday, November 2, 11
![Page 17: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/17.jpg)
onRender
Build renderTpl
Initialize renderData
Add classnames (baseCls, componentCls, additionalCls, ui class)
Append HTML to DOM
Initialize renderSelectors / childEls
Wednesday, November 2, 11
![Page 18: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/18.jpg)
render
Make visible
Event: render
Initialize content (html/contentEl/data+tpl)
Call afterRender
Wednesday, November 2, 11
![Page 19: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/19.jpg)
afterRender
Create Layout
Call Layout’s layout
Wednesday, November 2, 11
![Page 20: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/20.jpg)
layout
Call beforeLayout
[Container] renderItems
Create componentLayout
Call afterLayout
Call afterComponentLayout
Event: resize
doOwnerCtLayouts
Wednesday, November 2, 11
![Page 21: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/21.jpg)
afterRender
Initalize resizable
Initalize draggable
Initalize ARIA roles
Wednesday, November 2, 11
![Page 22: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/22.jpg)
render
Event: afterrender
Call initEvents
Initialize hidden/disabled
Wednesday, November 2, 11
![Page 23: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/23.jpg)
Destruction Overview
Destroy DOM nodes
Free event handlers
[Container] Destroy children
Clean up references
Wednesday, November 2, 11
![Page 24: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/24.jpg)
destroy
Event: beforedestroy
Call beforeDestroy
Component speci!c removal
Remove from ownerCt
Call onDestroy
Removes internal refs (proxy/resizer/componentLayout/loadMask/"oatingItems)
Wednesday, November 2, 11
![Page 25: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/25.jpg)
destroy
Destroy plugins
Remove DOM node
Event: destroy
Unregister with ComponentManager
Clear event listeners
Remove element refs
Wednesday, November 2, 11
![Page 26: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/26.jpg)
Code!
Custom component excessively nesting panels & not optimizing events
Quick side track - Event Delegation
Custom component rewritten using renderTpl/renderData/childEls/delegated events
Second renderTpl example - MultiSortTemplateColumn
Utility function examples (TextMetrics/MixedCollection/DelayedTask)
Wednesday, November 2, 11
![Page 27: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/27.jpg)
Additional Resources
http://sencha.com/learn/components
Ext JS in Action (4 MEAP)
http://manning.com/garcia3/
Wednesday, November 2, 11
![Page 28: Ext JS 4: Advanced Expert Techniques](https://reader037.vdocuments.us/reader037/viewer/2022102804/545c51ecb0af9f0d318b47de/html5/thumbnails/28.jpg)
Questions?
Rich Waters@rwaters
http://zerp.ly/rwaters
Wednesday, November 2, 11