Download pdf - 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!)


Components

{con!g}




Component LifecycleInitialization

Destruction

Rendering


Intialization Overview

Instantiate Class

Parse & Apply Con!gurations

De!ne Events

[Container] Initialize items


Instantiate Class

Ext.ClassManager.instantiate (Ext.create)

Locate class [lookup xtype]

Fires Synchronous load call if not present

Call class constructor


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


initComponent

Initialize event listeners

Enable bubbleEvents

[Container] initItems

Create items MixedCollection

Recurse add on items


[Container] add

Apply defaults

Lookup or Create component

Event: beforeadd

Call onBeforeAdd

Inject component into items MixedCollection


[Container] add

Call child Component.onAdded

Event: added

Call onAdd

Event: add


Constructor

Register with ComponentManager

Initialize Obserable/State mixins

Initialize plugins

Call renderTo / autoShow


Rendering Overview

Generate DOM using XTemplate

Insert DOM Nodes

Gather DOM references

Calculate layouts


Render

Event: beforerender

Get container reference (if any)

Call onRender


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


onRender

Build renderTpl

Initialize renderData

Add classnames (baseCls, componentCls, additionalCls, ui class)

Append HTML to DOM

Initialize renderSelectors / childEls


render

Make visible

Event: render

Initialize content (html/contentEl/data+tpl)

Call afterRender


afterRender

Create Layout

Call Layout’s layout


layout

Call beforeLayout

[Container] renderItems

Create componentLayout

Call afterLayout

Call afterComponentLayout

Event: resize

doOwnerCtLayouts


afterRender

Initalize resizable

Initalize draggable

Initalize ARIA roles


render

Event: afterrender

Call initEvents

Initialize hidden/disabled


Destruction Overview

Destroy DOM nodes

Free event handlers

[Container] Destroy children

Clean up references


destroy

Event: beforedestroy

Call beforeDestroy

Component speci!c removal

Remove from ownerCt

Call onDestroy

Removes internal refs (proxy/resizer/componentLayout/loadMask/"oatingItems)


destroy

Destroy plugins

Remove DOM node

Event: destroy

Unregister with ComponentManager

Clear event listeners

Remove element refs


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)


Additional Resources

http://sencha.com/learn/components

Ext JS in Action (4 MEAP)

http://manning.com/garcia3/






Questions?

Rich Waters@rwaters

http://zerp.ly/rwaters


