This document summarizes a presentation titled "Ext JS 4: Advanced Expert Techniques" given by Rich Waters at SenchaCon on October 25th, 2011. The presentation covered the component lifecycle in Ext JS 4, including initialization, rendering, and destruction. It also provided code examples for optimizing custom components using techniques like event delegation, render templates, and utility functions.

1. Ext JS 4:
Advanced Expert Techniques
Rich Waters
SenchaCon - 10/25/11
Wednesday, November 2, 11

2. 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

3. Components
{con g}
Wednesday, November 2, 11

4. Wednesday, November 2, 11

5. Wednesday, November 2, 11

6. Component Lifecycle
Initialization
Rendering
Destruction
Wednesday, November 2, 11

7. Intialization Overview
Instantiate Class
Parse & Apply Con gurations
De ne Events
[Container] Initialize items
Wednesday, November 2, 11

8. 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

9. Constructor
Not 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

10. initComponent
Initialize event listeners
Enable bubbleEvents
[Container] initItems
Create items MixedCollection
Recurse add on items
Wednesday, November 2, 11

11. [Container] add
Apply defaults
Lookup or Create component
Event: beforeadd
Call onBeforeAdd
Inject component into items MixedCollection
Wednesday, November 2, 11

12. [Container] add
Call child Component.onAdded
Event: added
Call onAdd
Event: add
Wednesday, November 2, 11

13. Constructor
Register with ComponentManager
Initialize Obserable/State mixins
Initialize plugins
Call renderTo / autoShow
Wednesday, November 2, 11

14. Rendering Overview
Generate DOM using XTemplate
Insert DOM Nodes
Gather DOM references
Calculate layouts
Wednesday, November 2, 11

15. Render
Event: beforerender
Get container reference (if any)
Call onRender
Wednesday, November 2, 11

16. 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

17. onRender
Build renderTpl
Initialize renderData
Add classnames (baseCls, componentCls,
additionalCls, ui class)
Append HTML to DOM
Initialize renderSelectors / childEls
Wednesday, November 2, 11

18. render
Make visible
Event: render
Initialize content (html/contentEl/data+tpl)
Call afterRender
Wednesday, November 2, 11

19. afterRender
Create Layout
Call Layout’s layout
Wednesday, November 2, 11

20. layout
Call beforeLayout
[Container] renderItems
Create componentLayout
Call afterLayout
Call afterComponentLayout
Event: resize
doOwnerCtLayouts
Wednesday, November 2, 11

21. afterRender
Initalize resizable
Initalize draggable
Initalize ARIA roles
Wednesday, November 2, 11

22. render
Event: afterrender
Call initEvents
Initialize hidden/disabled
Wednesday, November 2, 11

23. Destruction Overview
Destroy DOM nodes
Free event handlers
[Container] Destroy children
Clean up references
Wednesday, November 2, 11

24. 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

25. destroy
Destroy plugins
Remove DOM node
Event: destroy
Unregister with ComponentManager
Clear event listeners
Remove element refs
Wednesday, November 2, 11

26. 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

27. Additional Resources
http://sencha.com/learn/components
Ext JS in Action (4 MEAP)
http://manning.com/garcia3/
Wednesday, November 2, 11

28. Questions?
Rich Waters
@rwaters
http://zerp.ly/rwaters
Wednesday, November 2, 11