Advanced Templates         for Ext JS    James Brantly   @jbrantly
Overview
Overview Member Functions   SubtemplatesRecursive Templates    List Layout
Crash Course
Member Functions
Member Functions• Arbitrary JavaScript functions can be defined and  executed as part of the template• Extremely useful for...
Subtemplates
Subtemplates•   Templates can call other templates•   Great if there is a lot of redundancy in your templates•   Makes use...
Recursive Templates
Recursive Templates• Uses the same methodology as subtemplates: templates can  call other templates, even themselves• Grea...
List Layout
List Layout• Templates are often used to create lists (ex. DataView)• Typically laid out using normal flow (inline or block...
Example App
Questions?
Questions? http://www.sencha.com/deploy/dev/docs/     see the Ext.XTemplate constructorhttp://www.github.com/jbrantly/advt...
Advanced templates
Advanced templates
Advanced templates
Advanced templates
Advanced templates
Advanced templates
Advanced templates
Advanced templates
Upcoming SlideShare
Loading in …5
×

Advanced templates

3,550 views

Published on

Published in: Technology, Business
  • Be the first to comment

Advanced templates

  1. 1. Advanced Templates for Ext JS James Brantly @jbrantly
  2. 2. Overview
  3. 3. Overview Member Functions SubtemplatesRecursive Templates List Layout
  4. 4. Crash Course
  5. 5. Member Functions
  6. 6. Member Functions• Arbitrary JavaScript functions can be defined and executed as part of the template• Extremely useful for adding advanced functionality and all of the techniques shown today will use them• Defined by passing a config object as last parameter and attaching functions as properties• Three basic ways of accessing member functions from template
  7. 7. Subtemplates
  8. 8. Subtemplates• Templates can call other templates• Great if there is a lot of redundancy in your templates• Makes use of the “apply” method• Can optionally create a “manager” class to name and easily access subtemplates
  9. 9. Recursive Templates
  10. 10. Recursive Templates• Uses the same methodology as subtemplates: templates can call other templates, even themselves• Great for hierarchical/nested data
  11. 11. List Layout
  12. 12. List Layout• Templates are often used to create lists (ex. DataView)• Typically laid out using normal flow (inline or block) or stacked next to each other using float• It’s possible using the “xindex” variable and the modulo operator to create wrapper elements around groups of items for more advanced layout strategies
  13. 13. Example App
  14. 14. Questions?
  15. 15. Questions? http://www.sencha.com/deploy/dev/docs/ see the Ext.XTemplate constructorhttp://www.github.com/jbrantly/advtemplates james@sencha.com

×