Ext.XTemplate -CSDN博客

/** * @class Ext.XTemplate *

支持高级功能的模板类， * 如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量， * 直接执行代码和更多的功能。XTemplate亦提供相应的机制整合到 {@link 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(
 'Name: {name}',
 'Title: {title}',
 'Company: {company}',
 'Kids: ',
 '<tpl for="kids">',
 '{name}',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
在子模板的范围内访问父元素对象。 * 当正在处理子模板时，例如在循环子数组的时候， * 可以通过parent对象访问父级的对象成员。 *

*
var tpl = new Ext.XTemplate(
 'Name: {name}',
 'Kids: ',
 '<tpl for="kids">',
 '<tpl if="age > 1">',
 '{name}',
 'Dad: {parent.name}',
 '</tpl>',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
数组元素索引和简单匹配支持。当正在处理数组的时候，特殊变量#表示当前数组索引+1（由1开始，不是0）。 * 如遇到数字型的元素，模板也支持简单的数学运算符+ - * /。 *

*
var tpl = new Ext.XTemplate(
 'Name: {name}',
 'Kids: ',
 '<tpl for="kids">',
 '<tpl if="age > 1">',
 '{#}: {name}', // <-- 每一项都加上序号
 'In 5 Years: {age+5}', // <-- 简单的运算
 'Dad: {parent.name}',
 '</tpl>',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
自动渲染单根数组（flat arrays）。 * 单根数组（Flat arrays），指的是不包含分支对象只包含值的数组。 * 使用特殊变量{.}可循环输出这类型的数组： *

*
var tpl = new Ext.XTemplate(
 '{name}/'s favorite beverages:',
 '<tpl for="drinks">',
 '<div> - {.}</div>',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
基本的条件逻辑判断 * 配合标签tpl和操作符if的使用，可为你执行条件判断，以决定模板的哪一部分需要被渲染出来。 * 注意这没有else的操作符－－如需要，就要写两个逻辑相反的if的语句。 * 属性项要记得进行编码，好像下面的例子：

*
var tpl = new Ext.XTemplate(
 'Name: {name}',
 'Kids: ',
 '<tpl for="kids">',
 '<tpl if="age > 1">', // <-- 注意>要被编码
 '{name}',
 '</tpl>',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
即时执行任意的代码
* 在XTemplate中，{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量： *

*
values：当前作用域下的值。若想改变其中的值，你可以切换子模板的作用域。 *
parent：父级模板的对象 *
xindex：若是循环模板，这是当前循环的索引index（从1开始）。 *
xcount：若是循环模板，这是循环的次数。 *
fm：Ext.util.Format的简写方式。 *
* 这是一个例子说明怎么利用这个知识点生成交错行： *
var tpl = new Ext.XTemplate(
 'Name: {name}',
 'Company: {[company.toUpperCase() + ', ' + title]}',
 'Kids: ',
 '<tpl for="kids">',
 '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">,
 '{name}',
 '</div>',
 '</tpl>'
);
tpl.overwrite(panel.body, data);
*
模板成员函数。对于一些复制的处理， * 可以配置项对象的方式传入一个或一个以上的成员函数到XTemplate构造器中：

*
var tpl = new Ext.XTemplate(
 'Name: {name}',
 'Kids: ',
 '<tpl for="kids">',
 '<tpl if="this.isGirl(name)">',
 'Girl: {name} - {age}',
 '</tpl>',
 '<tpl if="this.isGirl(name) == false">',
 'Boy: {name} - {age}',
 '</tpl>',
 '<tpl if="this.isBaby(age)">',
 '{name} is a baby!',
 '</tpl>',
 '</tpl>', {
 isGirl: function(name){
 return name == 'Sara Grace';
 },
 isBaby: function(age){
 return age < 1;
 }
});
tpl.overwrite(panel.body, data);
* @constructor * @param {String/Array/Object} parts HTML判断或片断组成的数组，或多个参数然后执行join("")。 */