Examples of XTemplate

• com.extjs.gxt.ui.client.core.XTemplate
  through array at root node <tpl for="foo">...</tpl> // loop through array at foo node <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node Using the sample data above:

   // 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)); 

• Conditional processing with basic comparison operators

  
  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:

  • Double quotes must be encoded if used within the conditional
  • There is no else operator — if needed, two opposite if statements should be used.

   <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 == &quot;Jack&quot;">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));