Ext JS 4: Advanced Expert Techniques
-
Upload
sencha -
Category
Technology
-
view
6.091 -
download
2
description
Transcript of Ext JS 4: Advanced Expert Techniques
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