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

你可能感兴趣的:(JavaScript,html,ext)