XTemplate能够很方便的在页面中编写一段可以使用数据仓库中数据的html代码。
官网中给出的XTemplate类的一些除了编写html代码之外的方法:
A template class that supports advanced functionality like:
- Autofilling arrays using templates and sub-templates
- Conditional processing with basic comparison operators
- Basic math function support
- Execute arbitrary inline code with special built-in template variables
- Custom member functions
- Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',//for循环
'<p>{name} is a ',
'<tpl if="age >= 13">',
'<p>teenager</p>',
'<tpl elseif="age >= 2">',
'<p>kid</p>',
'<tpl else>',
'<p>baby</p>',
'</tpl>',
'</tpl></p>'
);
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name} is a ',
'<tpl switch="name">',//switch语句,发现确实很屌的东西
'<tpl case="Aubrey" case="Nikol">',
'<p>girl</p>',
'<tpl default">',
'<p>boy</p>',
'</tpl>',
'</tpl></p>'
);
2.此外还有很多内置的模版的变量,内置变量的在{[ ]}之间,会被像{ }之间一样被输出;而在{% %}之间的语句则只是用来运行并且作为判断条件。比较常用的有values表示模版正在访问的数据,xindex表示在对数组进行遍历时,显示当前数据项在数组中的序号(第一项为1);xcount当数组进行遍历时,表示数组中数据的条数。
'<tpl for="kids">',
'{% if (xindex % 2 === 0) continue; %}',
'{name}',
'{% if (xindex > 100) break; %}',//可以用来break the loop
'</div>',
'</tpl></p>'
3.在模版中使用自定义的函数,自定义的函数在配置选项中被定义
var tpl = new Ext.XTemplate(
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'<tpl else>',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'</tpl>',
{
// XTemplate configuration:
disableFormats: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
}
}
);
tpl.overwrite(panel.body, data);