Advanced Templates for Ext JS

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

james@sencha.com

Questions?