// generating strings in native methods easier than in Java, can be created in Java as well public native String getTemplate() /*-{ return ['<p>Kids: ', '<tpl for=".">', // process the data.kids node '<p>{#}. {name}</p>', // use current array index to autonumber '</tpl></p>' ].join(""); ); XTemplate tpl = XTemplate.create(getTemplate()); tpl.overwrite(someElement, Util.getJsObject(person.getKids())); // pass the kids property of the data object
An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:
public native String getTemplate() /*-{ return ['<p>Name: {name}</p>', '<p>Title: {title}</p>', '<p>Company: {company}</p>', '<p>Kids: ', '<tpl for="kids">', // interrogate the kids property within the data '<p>{name}</p>', '</tpl></p>' ].join(""); ); template.overwrite(someElement, Util.getJsObject(person));
When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:
public native String getTemplate() /*-{ return ['<p>Name: {name}</p>', '<p>Kids: ', '<tpl for="kids">', '<tpl if="age > 1">', '<p>{name}</p>', '<p>Dad: {parent.name}</p>', '</tpl>', '</tpl></p>' ].joint(""); ); template.overwrite(someElement, Util.getJsObject(person));
The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render specific parts of the template. Notes:
<tpl if="age > 1 && age < 10">Child</tpl> <tpl if="age >= 10 && age < 18">Teenager</tpl> <tpl if="id==\'download\'">...</tpl> <tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl> // no good: <tpl if="name == "Jack"">Hello</tpl> // encode " if it is part of the condition, e.g. <tpl if="name == "Jack"">Hello</tpl>
Using the sample data above: public native String getTemplate() /*-{ return ['<p>Name: {name}</p>', '<p>Kids: ', '<tpl for="kids">', '<tpl if="age > 1">', '<p>{name}</p>', '</tpl>', '</tpl></p>' ].join(""); ); template.overwrite(someElement, Util.getJsObject(person));
The following basic math operators may be applied directly on numeric data values:
+ - * /For example:
public native String getTemplate() /*-{ return ['<p>Name: {name}</p>', '<p>Kids: ', '<tpl for="kids">', '<tpl if="age > 1">', // <-- Note that the > is encoded '<p>{#}: {name}</p>', // <-- Auto-number each item '<p>In 5 Years: {age+5}</p>', // <-- Basic math '<p>Dad: {parent.name}</p>', '</tpl>', '</tpl></p>' ].join(""); ); template.overwrite(someElement, Util.getJsObject(person));
Anything between {[ ... ]}
is considered code to be executed in the scope of the template. There are some special variables available in that code:
public native String getTemplate() /*-{ return ['<p>Name: {name}</p>', '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>', '<p>Kids: ', '<tpl for="kids">', '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">', '{name}', '</div>', '</tpl></p>' ].join(""); ); template.overwrite(someElement, Util.getJsObject(person));
One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing:
var tpl = new Ext.XTemplate( '<p>Name: {name}</p>', '<p>Kids: ', '<tpl for="kids">', '<tpl if="this.isGirl(name)">', '<p>Girl: {name} - {age}</p>', '</tpl>', // use opposite if statement to simulate 'else' processing: '<tpl if="this.isGirl(name) == false">', '<p>Boy: {name} - {age}</p>', '</tpl>', '<tpl if="this.isBaby(age)">', '<p>{name} is a baby!</p>', '</tpl>', '</tpl></p>', { // XTemplate configuration: compiled: true, disableFormats: true, // member functions: isGirl: function(name){ return name == 'Sara Grace'; }, isBaby: function(age){ return age < 1; } } ); tpl.overwrite(panel.body, data);
|
|
|
|
|
|