ExtJS4学习笔记八－－Template的使用
1、append方法

var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
	'<tr><td>年龄</td><td>{1}</td></tr>',
	'<tr><td>性别</td><td>{2}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);

2、overwrite方法：

var tpl = new Ext.Template(//定义模板
	'<table  border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
	'<tr><td>年龄</td><td>{age}</td></tr>',
	'<tr><td>性别</td><td>{sex}</td></tr>',
	'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});

3、模板中使用格式化函数：

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90>员工姓名</td>',
	//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
	'<td width=120>{userName:capitalize}</td></tr>',
	'<tr><td width=90>工作日期</td>',
	//{WorkDate:this.cusFormat()}使用自定义格式化函数
	'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
	'</table>'
]);
//定义模板数据
var tplData = {
	userName : 'tom',
	WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
	return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

4、使用自定义格式化函数解析多层json对象

//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td>',
	'<td width=120>{name}</td></tr>',
	'<tr><td width=90 >年龄</td>',
	'<td width=120>{age}</td></tr>',
	'<tr><td width=90 >身高</td>',
	'<td width=120>{stature:this.parseJson}</td></tr>',
	'</table>'
);
//定义模板数据
var tplData = {
	name : 'tom',
	age : 24,
	stature : {
		num : 170,
		unit : 'cm'
	}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
	return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

5、使用tpl标签和for运算符

//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
	'<tpl for=".">',
	'<tr><td>{name}</td><td>{age}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = [
	{name:'张三',age:20},
	{name:'李四',age:25},
	{name:'王五',age:27},
	{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

6、使用parent在子模板中访问父对象

//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
	'<table border=1 cellpadding=0 cellspacing = 0>',
	'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
	'<tpl for="emps">',
	'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
	'</tpl>',
	'</table>'
);
//定义模板数据
var tplData = {
	companyName : 'ACB公司',
	emps:[
		{name:'张三',age:20},
		{name:'李四',age:25},
		{name:'王五',age:27},
		{name:'赵六',age:26}
	]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);

7、数组索引与简单数学运算

//定义模板