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
Ext JS 4: Advanced Expert Techniques
Rich Waters
SenchaCon - 10/25/11
Wednesday, November 2, 11
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
Components
{con!g}
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Component LifecycleInitialization
Destruction
Rendering
Wednesday, November 2, 11
Intialization Overview
Instantiate Class
Parse & Apply Con!gurations
De!ne Events
[Container] Initialize items
Wednesday, November 2, 11
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
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
initComponent
Initialize event listeners
Enable bubbleEvents
[Container] initItems
Create items MixedCollection
Recurse add on items
Wednesday, November 2, 11
[Container] add
Apply defaults
Lookup or Create component
Event: beforeadd
Call onBeforeAdd
Inject component into items MixedCollection
Wednesday, November 2, 11
[Container] add
Call child Component.onAdded
Event: added
Call onAdd
Event: add
Wednesday, November 2, 11
Constructor
Register with ComponentManager
Initialize Obserable/State mixins
Initialize plugins
Call renderTo / autoShow
Wednesday, November 2, 11
Rendering Overview
Generate DOM using XTemplate
Insert DOM Nodes
Gather DOM references
Calculate layouts
Wednesday, November 2, 11
Render
Event: beforerender
Get container reference (if any)
Call onRender
Wednesday, November 2, 11
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
onRender
Build renderTpl
Initialize renderData
Add classnames (baseCls, componentCls, additionalCls, ui class)
Append HTML to DOM
Initialize renderSelectors / childEls
Wednesday, November 2, 11
render
Make visible
Event: render
Initialize content (html/contentEl/data+tpl)
Call afterRender
Wednesday, November 2, 11
afterRender
Create Layout
Call Layout’s layout
Wednesday, November 2, 11
layout
Call beforeLayout
[Container] renderItems
Create componentLayout
Call afterLayout
Call afterComponentLayout
Event: resize
doOwnerCtLayouts
Wednesday, November 2, 11
afterRender
Initalize resizable
Initalize draggable
Initalize ARIA roles
Wednesday, November 2, 11
render
Event: afterrender
Call initEvents
Initialize hidden/disabled
Wednesday, November 2, 11
Destruction Overview
Destroy DOM nodes
Free event handlers
[Container] Destroy children
Clean up references
Wednesday, November 2, 11
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
destroy
Destroy plugins
Remove DOM node
Event: destroy
Unregister with ComponentManager
Clear event listeners
Remove element refs
Wednesday, November 2, 11
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
Additional Resources
http://sencha.com/learn/components
Ext JS in Action (4 MEAP)
http://manning.com/garcia3/
Wednesday, November 2, 11
Questions?
Rich Waters@rwaters
http://zerp.ly/rwaters
Wednesday, November 2, 11