Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ext JS 4:               Advanced Expert Techniques                             Rich Waters                            Senc...
About Me                            Chief Application Architect & Founder @ Extnd LLC                            Ext JS De...
Components  {con g}Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Component Lifecycle                                  Initialization                                   Rendering           ...
Intialization Overview                            Instantiate Class                            Parse & Apply Con gurations...
Instantiate Class                            Ext.ClassManager.instantiate (Ext.create)                            Locate c...
Constructor                            Not just traditional con g object                              con g.initialCon g  ...
initComponent                            Initialize event listeners                            Enable bubbleEvents        ...
[Container] add                            Apply defaults                            Lookup or Create component           ...
[Container] add                            Call child Component.onAdded                              Event: added         ...
Constructor                            Register with ComponentManager                            Initialize Obserable/Stat...
Rendering Overview                            Generate DOM using XTemplate                            Insert DOM Nodes    ...
Render                            Event: beforerender                            Get container reference (if any)         ...
onRender                            Initialize inline styles/padding/margin                            Build DOM (autoEl) ...
onRender                            Build renderTpl                            Initialize renderData                      ...
render                            Make visible                            Event: render                            Initial...
afterRender                            Create Layout                            Call Layout’s layoutWednesday, November 2,...
layout                            Call beforeLayout                              [Container] renderItems                  ...
afterRender                            Initalize resizable                            Initalize draggable                 ...
render                            Event: afterrender                            Call initEvents                           ...
Destruction Overview                            Destroy DOM nodes                            Free event handlers          ...
destroy                            Event: beforedestroy                            Call beforeDestroy                     ...
destroy                            Destroy plugins                            Remove DOM node                            E...
Code!                            Custom component excessively nesting panels & not                            optimizing e...
Additional Resources                            http://sencha.com/learn/components                            Ext JS in Ac...
Questions?                                 Rich Waters                                   @rwaters                         ...
Upcoming SlideShare
Loading in …5
×

Ext JS 4: Advanced Expert Techniques

6,970 views

Published on

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

Published in: Technology
  • Be the first to comment

Ext JS 4: Advanced Expert Techniques

  1. 1. Ext JS 4: Advanced Expert Techniques Rich Waters SenchaCon - 10/25/11Wednesday, November 2, 11
  2. 2. 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
  3. 3. Components {con g}Wednesday, November 2, 11
  4. 4. Wednesday, November 2, 11
  5. 5. Wednesday, November 2, 11
  6. 6. Component Lifecycle Initialization Rendering DestructionWednesday, November 2, 11
  7. 7. Intialization Overview Instantiate Class Parse & Apply Con gurations De ne Events [Container] Initialize itemsWednesday, November 2, 11
  8. 8. Instantiate Class Ext.ClassManager.instantiate (Ext.create) Locate class [lookup xtype] Fires Synchronous load call if not present Call class constructorWednesday, November 2, 11
  9. 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 initComponentWednesday, November 2, 11
  10. 10. initComponent Initialize event listeners Enable bubbleEvents [Container] initItems Create items MixedCollection Recurse add on itemsWednesday, November 2, 11
  11. 11. [Container] add Apply defaults Lookup or Create component Event: beforeadd Call onBeforeAdd Inject component into items MixedCollectionWednesday, November 2, 11
  12. 12. [Container] add Call child Component.onAdded Event: added Call onAdd Event: addWednesday, November 2, 11
  13. 13. Constructor Register with ComponentManager Initialize Obserable/State mixins Initialize plugins Call renderTo / autoShowWednesday, November 2, 11
  14. 14. Rendering Overview Generate DOM using XTemplate Insert DOM Nodes Gather DOM references Calculate layoutsWednesday, November 2, 11
  15. 15. Render Event: beforerender Get container reference (if any) Call onRenderWednesday, November 2, 11
  16. 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. 17. onRender Build renderTpl Initialize renderData Add classnames (baseCls, componentCls, additionalCls, ui class) Append HTML to DOM Initialize renderSelectors / childElsWednesday, November 2, 11
  18. 18. render Make visible Event: render Initialize content (html/contentEl/data+tpl) Call afterRenderWednesday, November 2, 11
  19. 19. afterRender Create Layout Call Layout’s layoutWednesday, November 2, 11
  20. 20. layout Call beforeLayout [Container] renderItems Create componentLayout Call afterLayout Call afterComponentLayout Event: resize doOwnerCtLayoutsWednesday, November 2, 11
  21. 21. afterRender Initalize resizable Initalize draggable Initalize ARIA rolesWednesday, November 2, 11
  22. 22. render Event: afterrender Call initEvents Initialize hidden/disabledWednesday, November 2, 11
  23. 23. Destruction Overview Destroy DOM nodes Free event handlers [Container] Destroy children Clean up referencesWednesday, November 2, 11
  24. 24. 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
  25. 25. destroy Destroy plugins Remove DOM node Event: destroy Unregister with ComponentManager Clear event listeners Remove element refsWednesday, November 2, 11
  26. 26. 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
  27. 27. Additional Resources http://sencha.com/learn/components Ext JS in Action (4 MEAP) http://manning.com/garcia3/Wednesday, November 2, 11
  28. 28. Questions? Rich Waters @rwaters http://zerp.ly/rwatersWednesday, November 2, 11

×