Technical solutions and general life savers

ExtJs 3.4 – Using XTemplate – Advanced

This article goes more in dept on XTemplate usage, for an outline, look at “Using XTemplate – Basics”.

Feeding an object to XTemplate
Quick refresh. Anything within the root of given data object can be called in the template using {propertyName}.

1

2

3

4

5

6

7

8

9

vartpl=newExt.XTemplate(

'<p>Name: {name}</p>',

'<p>Full name: {nameObject.first} {nameObject.last}</p>'

);

vardataObj={

name:'demo text',

nameObject:{first:'thirst',last:'past'

};

tpl.overwrite(panel.body,data);

Simply using name.firstname could be using to reach deeper elements when objects are nested.

If statement
In the simple example we already showed you how to use the if statement.

1

2

3

4

5

6

7

vartpl=newExt.XTemplate(

'<p>Name: {name}<tpl if="name = \" yes\""=""> good</tpl></p>'

);

vardataObj={

name:'demo text'

};

tpl.overwrite(panel.body,data);

The if statement also supports lower then < and higher then > as well as the <= and >= variations.
Although these expressions work on string, we do not recommend using them like that because it provide tricky behavior one might only understand when you know how character encoding works.

Feeding an array of objects to XTemplate
Then more interesting things. You can loop through arrays and template objects inside them.
For example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

vartpl=newExt.XTemplate(

'<p>Name: {name}<tpl if="name=\" yes\""=""> good</tpl></p>',

'<tpl for="kids">',

'<b>Name:</b> {name}<br />',

'<b>Age:</b> {age}<br />',

'</tpl>'

);

vardataObj={

name:'demo text',

kids:[

{name:"sammie",age:10},

{name:"tom",age:13},

]

};

tpl.overwrite(panel.body,data);

Both kids will be shown with their ages. When looping an array of strings use . to point to the base of the iterated element.

Using self defined functions inside the template
Closing the parameter list of a template with an object abless you to set things to the template object, but can also be used to add self defined functions.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

vartpl=newExt.XTemplate(

'<p>Name: {name}<tpl if="name=\" yes\""=""> good</tpl></p>',

'<tpl for="kids">',

'<b>Name:</b> {name}<br />',

'<b>Age:</b> {age}<br />',

'<b>Baby:</b> ',

'<tpl if="this.isBaby(age)">Yes</tpl>',

'<tpl if="this.isBaby(age) == false">No</tpl>',

'</tpl>',

{

//xtemplate properties

compiled:true,

disableFormats:true,

//custom function

isBoy:function(name){

returnname=='Timmy';

},

isBaby:function(age){

returnage&lt;1;

}

}

);

vardataObj={

name:'demo text',

kids:[

{name:"sammie",age:10},

{name:"tom",age:13},

{name:"lillie",age:0},

]

};

tpl.overwrite(panel.body,data);

As you can see above a function is used along with the for function, to loop through the children and see if they are babies.

Basic math functions
When dealing with integers + – / and * can be used to directly alter the value before showing them inside the template.
So something like:

1

2

vartpl=newExt.XTemplate(

'<p>Birth year: {current_year - age}</p>',

Is permitted and could be useful for example to show a certain value from 3 different offsets.

Conclusion
Xtemplate is a excellent way to do layout as it makes markup readable using powerful tools to make dynamic markup functional. Also because it’s almost pure code when compiled it delivers high performance also reducing memory when reused on many elements.