Home › post › ExtJs 4 – XTemplates

ExtJs 4 – XTemplates

Posted on April 30, 2011 by Hans Doller — No Comments ↓

If you’re an avid ExtJs developer like me, you’re bound to reach a point where you need to display an HTML view with dynamic variables. There are many scenarios like this. The most common example is a tabular grid or data view, but can range from a simple panel to an image gallery and beyond. So how does all this work?

A super simple example XTemplate looks like this: [view sandbox online]

var myTemplate = new Ext.XTemplate( '<div class="special-window">', '<div class="title">{title}</div>', '<div class="content">{content}</div>', '</div>');

Right now, we have an XTemplate defined, but we’re not all the way there yet. The XTemplate is missing data, and it needs to be rendered before it can be used. Here’s one way that we can do this:

var myHtmlTemplate = myTemplate.apply({ title: 'Special Window Title', content: 'Example window body text'});

At this point, we’ve rendered the template and stored it in a variable. The HTML produced will look something like this:

<div class="special-window"> <div class="title">Special Window Title</div> <div class="content">Example window body text</div></div>

Ok, this is cool.. but what other tricks does it know? Well, the above code was an entry-level example to the world of the Ext.XTemplate. Rest assured this is merely the tip of an enormous ice berg. A more advanced implementation is needed when you have to deal with a multidimensional dataset. Let’s say, a user signature: [view sandbox online]

var mySignature = { name: 'Hans Doller', department: 'Development', phoneNumbers: [ {number:'555-111-2222',rel:'office'}, {number:'555-111-2223',rel:'cellular'}, {number:'555-111-2224',rel:'home'} ], emailAddresses: [ '[e-mail]', '[e-mail]' ]};

As you can see, we’re dealing with some nested arrays, objects and string variables.. With normal Javascript and HTML, it would be a PITA to display. Never fear, XTemplate is here! Here’s what the template could look like:

var mySignatureTemplate = new Ext.XTemplate( '<div class="signature">', '<div class="name">{name}</div>', '<div class="department">{department}</div>', '<ul class="phone">', '<tpl for="phoneNumbers">', '<li class="number">{number} ({rel})</li>', '</tpl>', '</ul>', '<ul class="email">', '<tpl for="emailAddresses">', '<li class="address"><a href="mailto:{.}">{.}</a></li>', '</tpl>', '</ul>', '</div>');

To render the template to a string, once again we do:

var myHtmlSignature = mySignatureTemplate.apply(mySignature);

And voilà, the resulting HTML should look something like this:

<div class="signature"> <div class="name">Hans Doller</div> <div class="department">Development</div> <ul class="phone"> <li class="number">555-111-2222 (office)</li> <li class="number">555-111-2223 (cellular)</li> <li class="number">555-111-2224 (home)</li> </ul> <ul class="email"> <li class="address"><a href="mailto:[e-mail]">[e-mail]</a></li> <li class="address"><a href="mailto:[e-mail]">[e-mail]</a></li> </ul></div>

This article covers the most basic parts of XTemplate usage, there are a lot of features that were not covered in this article. For a full list of features, check out the online XTemplate documentation. If you have any specific questions, feel free to comment on this article, and I’ll help out where I can.