Javascript - ExtJs - XTemplate组件

XTemplate组件（Ext.XTemplate）

如果有一些重复的html代码需要装入数据，可以考虑使用XTemplate模板组件。XTemplate可以填入数组、对象，支持条件判断、for循环、基本的数学运算、变量占位符。

<div id="div1" ></div>

<script type="text/javascript">

    Ext.onReady(function () {

        var data = {
            name: '寒食',
            age: '32岁',
            character: ['易怒', '嗔念', '抑郁'],
            friends: [
                {
                    name: 'sam',
                    age: 32
                },
                {
                    name: '王五',
                    age: 26
                }
            ]
        };

        var tpl = new Ext.XTemplate(
            '<table style="border-collapse:collapse;width:300px;" border="1">',
            '<tr><td>姓名</td><td>{name}</td></tr>',
            '<tr><td>年龄</td><td>{age}</td></tr>',
            '<tr><td>性格</td><td>{character}</td></tr>',
            '<tr>',
                '<td>朋友</td>',
                '<td>',
                    '<tpl for="friends">',<!--tpl表示模板的脚本标签-->
                        '<p>姓名：{name}，年龄：{age}</p>',
                    '</tpl>',
                '</td>',
            '<tr>'
        );

        //将data放进模板，遇到{}占位符时，取出data中对应的属性填充进占位符
        //遇到tpl脚本标签的for时将执行for循环，循环以for指向的对象为目标，将对象的属性填充到{}中
        //最终将模板装入div1中
        tpl.overwrite(Ext.get("div1"), data);

    });

</script>

示例

基本运算

占位符支持简单运算

'{ age+1 }'

tpl脚本标签

tpl支持条件判断、for循环等，写脚本时必须声明一个tpl，多个脚本就要声明多个tpl，当为true时，该tpl包含的html标签会被填充。

<tpl if="age &lt; 18">{ name }：未成年 </tpl> //条件判断，比较运算符必须转换为html编码后的格式，不能直接写出。

访问父对象

在子对象的作用域中使用关键字parent访问父对象

{ parent.property } //如
'<p>姓名：{name}，年龄：{age+1} 是 {parent.name}的朋友</p>',

循环中的索引

 //{#}是当前循环的编号，从1开始
'<p>{#}姓名：{name}，年龄：{age+1} 是{parent.name}的朋友</p>',

模板特殊变量

特殊变量的访问规则是，tpl属性内可直接访问，不是在tpl的属性内访问则需要写：{ [ 变量 ] }，为什么要这样写？因为不写则会被视为字符串，就这么简单。

values：模板作用域中的值。即父对象的属性（一个对象）。

parent：父级模板的对象。

xindex：循环模板中的循环索引index（从1开始）。

xcount：循环模板中的循环总次数。

 '<tpl if="xcount==2"><b>测试</b></tpl>' //tpl属性内可直接访问特殊变量
'<tpl if="xcount==2"><b>测试{[xindex]}</b></tpl>' //tpl属性外访问特殊变量则格式是：{ [ 变量 ] }

模板函数

模板的第二个参数可使用Json格式定义函数。

var tpl = new Ext.XTemplate( 此参数略 ,
            {
                Test: function () { return "Test"}
            }
);    

'<p>姓名：{name}，{ [ this.Test() ] }</p>',

Javascript - 学习总目录