advanced templates
DESCRIPTION
TRANSCRIPT
Advanced Templatesfor Ext JS
James Brantly @jbrantly
Overview
Overview
Member FunctionsSubtemplates
Recursive TemplatesList Layout
Crash Course
Member Functions
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
Subtemplates
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
Recursive Templates
Recursive Templates• Uses the same methodology as subtemplates: templates can
call other templates, even themselves• Great for hierarchical/nested data
List Layout
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
Example App
Questions?
http://www.sencha.com/deploy/dev/docs/see the Ext.XTemplate constructor
http://www.github.com/jbrantly/advtemplates
Questions?