• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ext JS 4: Advanced Expert Techniques

Ext JS 4: Advanced Expert Techniques



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

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 solutions



Total Views
Views on SlideShare
Embed Views



5 Embeds 814

http://www.sencha.com 759
http://projects.topshelfsolution.com 43
http://bootcamp.local 7 3
http://sencha.site 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Ext JS 4: Advanced Expert Techniques Ext JS 4: Advanced Expert Techniques Presentation Transcript

    • Ext JS 4: Advanced Expert Techniques Rich Waters SenchaCon - 10/25/11Wednesday, 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 Lifecycle Initialization Rendering DestructionWednesday, November 2, 11
    • Intialization Overview Instantiate Class Parse & Apply Con gurations De ne Events [Container] Initialize itemsWednesday, November 2, 11
    • Instantiate Class Ext.ClassManager.instantiate (Ext.create) Locate class [lookup xtype] Fires Synchronous load call if not present Call class constructorWednesday, November 2, 11
    • 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 initComponentWednesday, November 2, 11
    • initComponent Initialize event listeners Enable bubbleEvents [Container] initItems Create items MixedCollection Recurse add on itemsWednesday, November 2, 11
    • [Container] add Apply defaults Lookup or Create component Event: beforeadd Call onBeforeAdd Inject component into items MixedCollectionWednesday, November 2, 11
    • [Container] add Call child Component.onAdded Event: added Call onAdd Event: addWednesday, November 2, 11
    • Constructor Register with ComponentManager Initialize Obserable/State mixins Initialize plugins Call renderTo / autoShowWednesday, November 2, 11
    • Rendering Overview Generate DOM using XTemplate Insert DOM Nodes Gather DOM references Calculate layoutsWednesday, November 2, 11
    • Render Event: beforerender Get container reference (if any) Call onRenderWednesday, 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 / childElsWednesday, November 2, 11
    • render Make visible Event: render Initialize content (html/contentEl/data+tpl) Call afterRenderWednesday, November 2, 11
    • afterRender Create Layout Call Layout’s layoutWednesday, November 2, 11
    • layout Call beforeLayout [Container] renderItems Create componentLayout Call afterLayout Call afterComponentLayout Event: resize doOwnerCtLayoutsWednesday, November 2, 11
    • afterRender Initalize resizable Initalize draggable Initalize ARIA rolesWednesday, November 2, 11
    • render Event: afterrender Call initEvents Initialize hidden/disabledWednesday, November 2, 11
    • Destruction Overview Destroy DOM nodes Free event handlers [Container] Destroy children Clean up referencesWednesday, 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 refsWednesday, 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/rwatersWednesday, November 2, 11