Understanding ExtJS (3.x) Components

Transcript

1. Presented by Art Kay
2. 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…
3. Sencha Chicago User Group ž  Looking for: —  Speakers —  Ideas —  Giveaways —  Sponsors ž  GET INVOLVED!
4. Agenda ž  What are ExtJS Components? ž  Basic Architecture ž  The Component() Class ž  Component Life Cycle ž  A Deeper Look (Firebug) ž  Inheritance ž  Example: PagingToolbar() Extension ž  Questions
5. 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({ … })
6. Basic Architecture: Properties ž  References to DOM —  el ž  Current state of component —  disabled —  hidden —  rendered ž  References to parent containers —  ownerCt —  refOwner
7. Basic Architecture: Methods ž  Get/Set data —  getXType() ž  Traverse component hierarchy —  nextSibling() ž  Manipulate the DOM —  addClass() ž  Change the display —  show() ž  Manage events —  addListener()
8. Basic Architecture: Events ž  Component Life Cycle —  render ž  Interactions —  beforehide ž  State —  staterestore
9. The Component Class() ž  constructor: —  Add events —  Calls superclass’ constructor —  initComponent() —  [ Add plugins ] —  [ Enable state ] —  [ Render ]
10. Component Life Cycle ž  Creation ž  Rendering ž  Interaction ž  Destruction
11. A Deeper Look ž  Using Firebug to inspect basic Ext.Component()
12. 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!
13. Inheritance: Example ž  Let’s extend Ext.PagingToolbar() —  Add a ComboBox() to select page size
14. Questions ž  Do things change in 4.x?