Ext.XTemplate使用入门

Ext.XTemplate的语法

Ext.XTemplate是Ext中关于页面模板的一个组件。用来将数据和模板组合出最终的html。所谓数据指的是javascript的对象。EMP在loadEntityToPage中使用了这个组件。举例如下；

 

 1 // javascript，我们要展现的javascript对象，这个对象一般来说是从后台取回来的
 2
 3 // 这是我的javascript对象表示
 4 {
 5    id:"1232132132dfasf121r",
 6    name:"zcg",
 7    age:13,
 8    goodPerson:true,    //好人一个
 9    head:{            
10        size:15,
11        type:"smart"    //脑袋是聪明的
12    }
13    hands:
14        [
15            {
16                id:"123",
17                type:"left"    //左手
18            }
19            {
20                id:"456",
21                type:"right"
22            }
23        ]
24}

//html 模板

 

1 < div  id ="template" >
2      < span > 编号：{id} </ span >
3      < span > 名字：{age} </ span >
4 </ div >

 

在模板中，用“{}”括起来的内容，被当作是数据对象的一个属性。例如{id}，会被替换成为数据对象的id，以此类推。

问题来了，按照上面的例子，如果你在模板中写一个{head.type}，想把脑袋的类型也显示出来，这时候会发现出错了。原因是模板中不支持用{a.b}的方式表示嵌套属性。那么怎么办呢。分为两种情况：

如果你从后台取回来的数据只有一个，那么这样写：{[values.head.type]}。

如果你从后台取回来的数据不只一个：那么这样写：{[values[xindex].head.type}}

语法解释：“{[]}”括起来的东西会被当作javascript执行，其中有几个特殊的字符，values代表数据对象，如果数据对象是数组，那么用xindex代表当前索引。

关于Ext.Template更多的信息：http://extjs.com/deploy/dev/docs/?class=Ext.XTemplate