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);