| Package: | Ext.grid |
| Defined In: | .js |
| Class: | |
| Extends: | Object |
支持高级功能的模板类, 如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量, 直接执行代码和更多的功能。XTemplate亦提供相应的机制整合到 Ext.DataView.
XTemplate有些特殊的标签和内建的操作运算符,是模板创建时生成的,不属于API条目的一部分。 下面的例子就演示了这些特殊部分的用法。每一个例子使用的数据对象如下:
var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
company: 'Ext JS, LLC',
email: 'jack@extjs.com',
address: '4 Red Bulls Drive',
city: 'Cleveland',
state: 'Ohio',
zip: '44102',
drinks: ['Red Bull', 'Coffee', 'Water'],
kids: [{
name: 'Sara Grace',
age:3
},{
name: 'Zachary',
age:2
},{
name: 'John James',
age:0
}]
};
配合使用标签tpl和操作符for,
你可自由切换for所指定的对象作用域,即可访问声明于模板之中对象。
如果这个对象是一个数组,它就会自动循环输出,不断重复tpl标签内的模板代码块,输出数组内的每一条内容:
自动数组输出和作用域切换。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
在子模板的范围内访问父元素对象。
当正在处理子模板时,例如在循环子数组的时候,
可以通过parent对象访问父级的对象成员。
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);
数组元素索引和简单匹配支持。
当正在处理数组的时候,特殊变量#表示当前数组索引+1(由1开始,不是0)。
如遇到数字型的元素,模板也支持简单的数学运算符+ - /。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{#}: {name}</p>', // <-- 每一项都加上序号
'<p>In 5 Years: {age+5}</p>', // <-- 简单的运算
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
自动渲染单根数组(flat arrays)。
单根数组(Flat arrays),指的是不包含分支对象只包含值的数组。
使用特殊变量{.}可循环输出这类型的数组:
var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
基本的条件逻辑判断
配合标签if的使用,可为你执行条件判断,以决定模板的哪一部分需要被渲染出来。
注意这没有else的操作符--如需要,就要写两个逻辑相反的if的语句。
属性项要记得进行编码,好像下面的例子:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">', // <-- 注意>要被编码
'<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
即时执行任意的代码
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[company.toUpperCase() + ', ' + title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">,
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
模板成员函数。 对于一些复制的处理, 可以配置项对象的方式传入一个或一个以上的成员函数到XTemplate构造器中:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
tpl.overwrite(panel.body, data);