ExtJs4 笔记（4） Ext.XTemplate 模板

本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇，但是我个人不是很喜欢那种html混编C#的方式，仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html，而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。

行文之前我先把公共的html和用到的js数据贴在前面，后面的代码都要引用到。

二、在子模板的范围内访问父元素对象

当我们在遍历输出张三的朋友时，需要再次访问张三的信息，怎么做呢，看如下js：

[Js]

三、数组元素索引和简单运算支持

在循环访问数组时，可以通过{#}获取索引信息,基础数据还可以支持简单运算:

[Js]

四、自动渲染单根数组

通过{.}可以自动渲染没有键值对的单根数组，示例如下:

[Js]

五、条件逻辑判断

配合标签tpl和操作符if的使用，可以做一些简单的逻辑判断，注意没有else操作符，你可以写两个if来代替。另外大于，小于符号要经过html编码，不能直接写出。

[Js]

六、即时执行任意的代码

在XTemplate中，{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量：?
values：当前作用域下的值。若想改变其中的值，你可以切换子模板的作用域。?
parent：父级模板的对象?
xindex：若是循环模板，这是当前循环的索引index（从1开始）。?
xcount：若是循环模板，这是循环的次数 。

[Js]

七、模板成员函数

在模板中还可以调用自定义函数，这些函数通过配置传入。相关写法如下：

[Js]