1. template 是什么
template 是一个 HTML 片段的模板，它可以进行预编译从来提升性能。
2. Xtemplate
Xtemplate 继承自 template,Xtemplate 支持以下这些功能：
1.数组
1) 如果给定的是个数组，他会自动填充，为数组总每一项重复 template 中的 block。
2) for=“.” ，会从根节点开始重复，for=“record” ，会从 record 节点开始重复。
'<tpl for="score" >' +
'<span class="values"></span>' +
'</tpl>' +
例如，数组score，其中每一个值为values。
2.处理基本的比较运算符
注：大于和小于号要使用html实体字符。
'<tpl if="price && discount">' +
'<div class="item-price"><span>{price}</span><span>{discount}</span></div>' +
'</tpl>'
例如，price && discount 为true时，显示div。
3.支持基本的数学函数
支持+ - * /等
<span class="report-blue-number">{[parseInt((values.rightNum/values.totalNum).toFixed(2) * 100)]}%</span><span class="report-blue-number">{[values.totalNum-values.rightNum]}</span>
4.执行有内置模板变量的代码
任何在{[ ]}中的代码都会在 template 的作用域中被执行。生成的结果包括计算表达式和结果，其中代码中有一些特殊的变量如下：
- out:template 附加的输出数组
- values:当前作用域下的值，你可以通过改变作用域来改变子 template
- parent:祖先的作用域
- xindex:如果是循环 template，index 以 1 开始
- xcont: 如果是循环 template，会循环 template 的所有的数据。
另外， 在 "{% ... %}"中的代码会被直接插入到 template 生成的代码中， 这些代码块没有输出，它们可以做一些简单的操作，例如，在循环中 break/continue，或者，控制构造函数或方法的调用（要求它们没有输出）。
5 自定义成员函数
自定义函数需要写在 Xtemplate 内部，写在html代码之后，用逗号隔开。
tpl: new Ext.XTemplate(
html code,
{
starClass: function (values) {},
isPassed: function (defeatNum) {}
}
)
html行间属性调用该函数时使用class=“this.startClass(vaules)”，内容显示时{variable}，函数输出内容时{[fu]}。
'<p class="this.setPriceCls(values.transaction_date)">{[Formatter.toFixed(values.price,1)]}</p>'
6 可以定义一些 API 中没有定义的特殊标记或内置运算符。
3.我遇到的问题及解决方法总结
3.1 我遇到的问题：
1）template 中出现空的 div 效果如图：
‘<div >’,
‘<tpl if = “entryType”=="money_fund"”>’,’<tpl>’,
‘</div >’,
原因：先声明了 DIV，后进行的判断，所以无论 IF 是否为真，都会有一个 DIV 块。
将 DIV 块放入 tpl 中即可，代码如下：
‘<tpl if = “entryType”=="money_fund"”>’,
‘<div >’, ‘</div >’,
’<tpl>’,
效果如下：
2）tpl 中断句时什么时候用“+”，什么时候用“，”
“+”：
没有“[]“时，断句要用“+”，如下：
tpl: '<div class="investment-portfolio-buysellpoint-head">' +
'</div>',
“，”：
有”[]“时，断句可以用“，”，如下：
itemTpl: [
'<div>',
'</div>'
],
3）设置tpl时，需要同时设置data，否则会造成数据不渲染。
4）使用tpl+data形式是，不是使用updateData方法，否则会造成数据不渲染。
3.2 总结：
1)参数的调用：
<tpl>{notifyingAt}</tpl>
其中：notifyingAt 为一个参数
参数可以做简单的四则样式，比如有一个 age 参数，我要算一算他 3 年以后是几岁的话:
<tpl>{age+3}</tpl>
2)函数的调用：
<tpl>{[Ext.Date.format(new Date(),"Y-m-d")]}</tpl>
3)函数中参数的调用：
<tpl>{[Ext.Date.format(value.notifyingAt,"Y-m-d")]}</tpl>
4)if else:
<tpl if="this.isBought(values.isBought)">// if<tpl else>//else</tpl>