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