From Sencha - Learn

I would suggest downloading the code used for this example here so you have something to work with. A working example can be found here.

Step 1: HTML for Your Template

The first step is pretty straight forward, its the HTML that will be used to format your data. Some keywords in curly brackets will be the placeholders for your data {id}, {url} and {text}. You could simplify this by using {0}, {1}, {2}, but naming your placeholders makes the code more readable.

Now we load the html template we just created into a template object (line 5), then compile the template for speed (line 6). Compiling the template is not required, but generally improves the speed.

var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';
 
	var tpl = new Ext.Template(html);
	tpl.compile();

Step 2: Adding Data to Your Template

In this next step we are going to append two rows to our data using the append method, with the first argument being our div id. The next argument contains our data object, you can see the elements 'id', 'url' and 'text' correspond with placeholders in our template above.

tpl.append('blog-roll', {
	    id: 'link1', 
	    url: 'http://www.jackslocum.com/', 
	    text: "Jack's Site"
	});
	tpl.append('blog-roll', {
	    id: 'link2', 
	    url: 'http://www.extjs.com/', 
	    text: "Jack's New Site"
	});

Thats the basics of using the template, pretty simple, eh?

What's Next?

The documentation is a great place to look if your ready to start changing things around, while you're there take a look at the Feed Viewer example which draws heavily on templates.

• Ext Programmer's API Documentation
• Ext User Forums

This page was last modified on 9 August 2007, at 01:53. This page has been accessed 74,587 times.