Advanced Templatesfor Ext JS

James Brantly @jbrantly

Overview

Member Functions

Subtemplates

Recursive 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 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

http://www.sencha.com/deploy/dev/docs/

see the Ext.XTemplate constructor

http://www.github.com/jbrantly/advtemplates

james@sencha.com

Questions?