Ext 中有模板，其实就是页面代码变量替换前的页面字符串而已。
如下：
var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';
var tpl = new Ext.XTemplate(html); //加入字符串
tpl.compile(); //编译下，优化性能
填充二行数据，其中id，url，text，就是设置的变量替换。
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"
});
如果html太长又不想显示，可以调用函数ellipsis()来截断多余部分，并用...来显示
如下：
var content = 'test test test test test test test test';
var myTpl = new Ext.Template('<div>{content:ellipsis(10)}<br/>
<a href="{moreLink}">Read More</a></div>');
还有其他函数可以处理该字符串：
- undef -检查一个值是否为underfined，如果是的转换为空值
- htmlEncode - 转换(&, <, >, and ') 字符
- trim - 对一段文本的前后多余的空格裁剪
- substr(start, length) - 返回一个从指定位置开始的指定长度的子字符串。
- lowercase - 返回一个字符串，该字符串中的字母被转换为小写字母。
- uppercase - 返回一个字符串，该字符串中的字母被转换为大写字母。
- capitalize - 返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
- usMoney - 格式化数字到美元货币。如：$10.97
- date[(format)] - 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入，默认为“月/日/年”
- stripTags - 剥去变量的所有HTML标签
其用法都是
var template = '模板字符串 ：处理函数';
方式赋给new Ext.Template(template)
还可以自定义处理函数，在冒号前加入this.函数名，然后需要定义该函数，
如下：
var myTpl = new Ext.XTemplate('<div>User: {username} Password: {password:this.EncodeString}</div>');
myTpl.EncodeString = function(val) {
return MD5(val)
};
myTpl.append(document.body,
{username: 'kenlistian',
password: '123'});
更为复杂的模板构造和填入：采用了for =关键字，循环填入。
var iconTpl = new Ext.XTemplate(
'<fieldset><legend>{title}</legend>
<tpl for="iconArray">
<img src="{img}" width="16" height="16" /> {desc}<br/>
</tpl>
</fieldset>');
var tplObj = {
title: 'Order Legend',
iconArray: [
{img: 'images/icons/cog_orange.png', desc: 'Active Order'},
{img: 'images/icons/stop.png', desc: 'Cancelled Order'},
{img: 'images/icons/tick.png', desc: 'Completed Order'}
]
};
iconTpl.compile();
iconTpl.append(document.body, tplObj);
在构造模板中还有if 关键字，如下模板格式，来自api document，
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
自定义函数和if也可以组合成模板，这里不再叙述，见api 文档。