Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding ExtJS (3.x) Components

Understanding ExtJS (3.x) Components

Avatar for Arthur Kay

Arthur Kay

June 05, 2012
Tweet

More Decks by Arthur Kay

Other Decks in Programming

Transcript

  1. Who am I? ž  Arthur Kay —  Solutions Engineer at

    Sencha, Inc. —  Longtime ExtJS fanatic —  Web developer for 10+ years —  www.akawebdesign.com —  @arthurakay ž  Sencha is hiring…
  2. Sencha Chicago User Group ž  Looking for: —  Speakers — 

    Ideas —  Giveaways —  Sponsors ž  GET INVOLVED!
  3. Agenda ž  What are ExtJS Components? ž  Basic Architecture ž 

    The Component() Class ž  Component Life Cycle ž  A Deeper Look (Firebug) ž  Inheritance ž  Example: PagingToolbar() Extension ž  Questions
  4. What are Components? ž  Participate in the automated ExtJS life

    cycle (create, render, destroy) ž  Can be added to any Container() ž  Built-in support for hide/show and enable/disable ž  Registered with ComponentMgr() ž  xtypes ž  var myCmp = new Component({ … })
  5. Basic Architecture: Properties ž  References to DOM —  el ž 

    Current state of component —  disabled —  hidden —  rendered ž  References to parent containers —  ownerCt —  refOwner
  6. Basic Architecture: Methods ž  Get/Set data —  getXType() ž  Traverse

    component hierarchy —  nextSibling() ž  Manipulate the DOM —  addClass() ž  Change the display —  show() ž  Manage events —  addListener()
  7. Basic Architecture: Events ž  Component Life Cycle —  render ž 

    Interactions —  beforehide ž  State —  staterestore
  8. The Component Class() ž  constructor: —  Add events —  Calls

    superclass’ constructor —  initComponent() —  [ Add plugins ] —  [ Enable state ] —  [ Render ]
  9. Inheritance ž  All components inherit from Ext.util.Observable() —  Inherit methods

    for add/remove/firing events ž  All components can be extended to create new subclasses —  These will inherit the markup, properties, methods and events from their parent… —  …unless overridden!