《仔仔细细分析Ext》全面解析Ext模板XTemplate之一：更灵活、更高效的数据展示方式

导言：

         最常用的，容纳数据的面板是 FormPanel 、 GirdPanel 、 TreePanel 。

         它们内置了一些好用的工具方法，像排序、复选、折叠、搜索、编辑等等。

有些情况下，仅仅这几类的数据展示面板实在不够用。比如在一行数据里面放一张图片？

又或者在数据量比较大的时候，使用封装得比较严实 Record 对象，会带来更严重的渲染性能问题。

再有就是，有时候我们只是展示一下数据，没有什么操作要做，实在没必要拿上那么重量级的武器。

那么在这些情况下，结合 DataView 与 XTemplate 来构建自己特有的数据展示界面就很有必要。而且，总体说，模板会比封装的 Record 更高效一些。

另外，在阅读源代码的过程中，我发现一个事情，设计到 UI 部分的内容大量地使用了 Template 和 XTemplate 。所以，先把模板这部分内容熟悉一下也可以为继续阅读代码节省不少精力，磨刀不误砍柴工嘛。

         模板中的一些特性对于熟悉 JSTL(2.0) 的人来说是相当亲切的，像自动行号、迭代操作、条件判断。

 

模板使用示例图片：

 
 

API 文档翻译：

        

         模板类支持更高级的功能，例如：

自动填充数组；

按照基本的比较运算符进行条件过滤；

子模板；

支持基本的方法匹配；

特殊的内置模板参数；

执行内嵌的代码，

等等。

         模板也提供一种模式化的机制使它成为 Ext.DataView 的组件。

         模板支持很多特殊的标签和内置的操作符，这些没有被作为 API 的一部分来定义，但是可以作为模板的一部分来创建。以下的例子演示了所有支持的特性。下面是一个数据对象，每段示例代码都使用这个对象。

var data = {

name: ' 杰克 . 斯洛克姆 ',

title: ' Ext 首席开发者 ',

    company: 'Ext JS, LLC',

    email: '[email protected]',

    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

}

]

};

 

 

1、 自动填充数组并切换作用域

使用 ”<tpl>” 标签和 ”for” 操作符，你可以把作用域切换到 ”for” 所指向的对象，然后访问这个对象的成员来组装模板。如果 ”for” 循环中的变量是一个数组，它将被自动填充，对于数组中的每个元素，重复 ”<tpl>” 标签中的模板 ( 定义 ) 块 ( 来自动填充 ) 。（译者注：这句的意思是，如果 for 循环里面指定的对象是个数组，就会自动解析这个数组，然后使用数组中的每个元素来填充模板。）

 

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Title: {title}</p>',

    '<p>Company: {company}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<p>{name}</p>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 

（译者注：运行效果图如下。

 

）

2、 从内部的子模板作用域访问父对象

当处理一个子模板时，例如当迭代 ”child” 这个数组的时候，你可以通过 ”parent” 关键字来访问父对象的成员。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '<p>{name}</p>',

             '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

（译者注：运行效果图如下。

 

）

 

3、 数组元素序号和基本的匹配支持

当处理数组的时候，特殊的变量 ”{#}” 可以提供数组当前的 index+1 （这个数据）。模板也支持基本的数学运算符 ”+” 、 ”-” 、 ”*” 、 ”/” ，这些操作符可以直接在数字型的数据值上使用。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '<p>{#}: {name}</p>',  // <-- Auto-number each item

            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math

            '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 

（译者注：运行效果图如下。

 

）

4、 自动渲染普通的（译者注：数组元素不是对象，是基本的 String 、 Number ）数组

普通的数组，包含的元素（不是对象型的）可以使用特殊的变量 ”{.}” 在一个循环体内自动渲染。这个变量用来描述数组当前索引中的值。

var tpl = new Ext.XTemplate(

    '<p>{name}\'s favorite beverages:</p>',

    '<tpl for="drinks">',

       '<div> - {.}</div>',

    '</tpl>'

);

tpl.overwrite(panel.body, data);

（译者注：运行效果图如下。

 

）

5、 基本的条件匹配逻辑

使用 ”<tpl>” 标签和 ”if” 操作符，你可以提供条件检查，来决定是否渲染模板中指定的部分。注意：没有 ”else” 操作符 --- 如果需要，你必须使用两个条件不同的 ”if” 。这里需要编码好的（译者注：意指 URL 转义字符 ）符号，就像以下的示例一样 :

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

         '<tpl if="age &gt; 1">',// ß 注意： ”>” 号是编码好的。

            '<p>{name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

 

（译者注：运行效果图如下。

）

6、 执行任意内嵌代码的能力

在一个模板里面，位于 ”{[…]}” 号中的任何东西都被当作是需要在模板作用域内被执行的代码。在这段代码里面，有一些特殊的变量可以使用：

“ values ” ：当前作用域下的值。如果你使用子模板来改变作用域，你就可以改变 ”values” 的值。

“ parent ” ：“祖先”模板的作用域（或值）。

“ xindex ” ：如果你在一个循环的模板里面，这个值表示你当前所在的“第几次”循环（从 1 开始）。

“ xcount ” ：如果你在一个循环的模板里面，这个值表示你正在迭代的数组的总长度。

“ fm ” ： Ext.util.Format 对象的别名。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

       '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',

        '{name}',

        '</div>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

（译者注：使用myext 放出来的 Ext2.0 API 的人请注意，这份 API 上的这段示例代码有错误，无法运行。笔者查阅了原始的文档，发现和他们发出来的不一致。 ）

（译者注：运行效果图如下。

）

 

7、 模板的成员函数

可以在 config 对象中定义一个或多个成员函数传递给 XTemplate 的构造函数，来进行更复杂的处理。

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="this.isGirl(name)">',

            '<p>Girl: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isGirl(name) == false">',

            '<p>Boy: {name} - {age}</p>',

        '</tpl>',

        '<tpl if="this.isBaby(age)">',

            '<p>{name} is a baby!</p>',

         '</tpl>',

    '</tpl></p>', {

     isGirl: function(name){

         return name == 'Sara Grace';

     },

     isBaby: function(age){

        return age < 1;

     }

});

tpl.overwrite(panel.body, data);

（译者注：运行效果图如下。

）

 

总结：

         请注意模板的第六和第七个特性，这两个特性使得我们在实现处理数据时的一些特殊的要求变得轻而易举。而且这种写法代码清晰，可以说是相当优雅。

有了这七个示例给出来的 Demo ，对于模板的使用应该就比较顺畅了。下一篇，我们就来分析模板 XTemplate 到底是怎么实现的，它的运行机制是什么。