XTemplate组件(Ext.XTemplate)
如果有一些重复的html代码需要装入数据,可以考虑使用XTemplate模板组件。XTemplate可以填入数组、对象,支持条件判断、for循环、基本的数学运算、变量占位符。
<div id="div1" ></div>
<script type="text/javascript">
Ext.onReady(function () {
var data = {
name: '寒食',
age: '32岁',
character: ['易怒', '嗔念', '抑郁'],
friends: [
{
name: 'sam',
age: 32
},
{
name: '王五',
age: 26
}
]
};
var tpl = new Ext.XTemplate(
'<table style="border-collapse:collapse;300px;" border="1">',
'<tr><td>姓名</td><td>{name}</td></tr>',
'<tr><td>年龄</td><td>{age}</td></tr>',
'<tr><td>性格</td><td>{character}</td></tr>',
'<tr>',
'<td>朋友</td>',
'<td>',
'<tpl for="friends">',<!--tpl表示模板的脚本标签-->
'<p>姓名:{name},年龄:{age}</p>',
'</tpl>',
'</td>',
'<tr>'
);
//将data放进模板,遇到{}占位符时,取出data中对应的属性填充进占位符
//遇到tpl脚本标签的for时将执行for循环,循环以for指向的对象为目标,将对象的属性填充到{}中
//最终将模板装入div1中
tpl.overwrite(Ext.get("div1"), data);
});
</script>
基本运算
占位符支持简单运算
'{ age+1 }'
tpl脚本标签
tpl支持条件判断、for循环等,写脚本时必须声明一个tpl,多个脚本就要声明多个tpl,当为true时,该tpl包含的html标签会被填充。
<tpl if="age < 18">{ name }:未成年 </tpl> //条件判断,比较运算符必须转换为html编码后的格式,不能直接写出。
访问父对象
在子对象的作用域中使用关键字parent访问父对象
{ parent.property } //如
'<p>姓名:{name},年龄:{age+1} 是 {parent.name}的朋友</p>',
循环中的索引
//{#}是当前循环的编号,从1开始
'<p>{#}姓名:{name},年龄:{age+1} 是{parent.name}的朋友</p>',
模板特殊变量
特殊变量的访问规则是,tpl属性内可直接访问,不是在tpl的属性内访问则需要写:{ [ 变量 ] },为什么要这样写?因为不写则会被视为字符串,就这么简单。
values:模板作用域中的值。即父对象的属性(一个对象)。
parent:父级模板的对象。
xindex:循环模板中的循环索引index(从1开始)。
xcount:循环模板中的循环总次数。
'<tpl if="xcount==2"><b>测试</b></tpl>' //tpl属性内可直接访问特殊变量
'<tpl if="xcount==2"><b>测试{[xindex]}</b></tpl>' //tpl属性外访问特殊变量则格式是:{ [ 变量 ] }
模板函数
模板的第二个参数可使用Json格式定义函数。
var tpl = new Ext.XTemplate( 此参数略 , { Test: function () { return "Test"} } ); '<p>姓名:{name},{ [ this.Test() ] }</p>',