个人认为，XTemplate是ExtJs中最灵活的用来显示数据的组件，有点类似aspx中的Repeater控件，显示数据的模板完全可以由用户以html方式来定制.

先给一个官方的静态示例(稍微改了下)，代码并不复杂，关键的地方，我已经注释了

1

',
23

'

Title: {title}

',
24

'

Company: {company}

',
25

'

[Kids:] ',
26'',//表明这里循环读取kids节的数据
27'

　　{name}

',
28

'

',
29

'

[Drinks:] ',
30'',
31'

　　{#}.{.}

', //表明这里循环读取drinks节的数据,当数据没有属性名称时，用"."代表数据
32

'

'
33

);
34

tpl.overwrite(Ext.getBody(), data);
35

36

});
37

运行结果图:

接下来我们看看如何跟服务器端的WCF做交互

１.首先定义一个用于信息传输的实体类(实际开发中，可以是任何可序列化的class,包括linq to sql生成的类)

[object Object][object Object]

2.新建一个"启用了Ajax的WCF服务"
a.同时将svc手动修改一下，注意下面的高亮部分要手动加上去:

b.web.config中，也参考下面修改

c.在wcf中增加一个方法，代码如下:

[object Object][object Object]

这里为了简单起见，直接new并初始化了一个Person对象，然后返回为JSON格式

3.最后修改一下前面静态页的代码，完整页面代码如下:

[object Object][object Object]

解释一下:利用ExtJs的Ajax对象，请求MyServices.svc/GetPerson方法，获取Json字符串，其它地方完全一样，需要注意的是:

a.返回的字符串，需要用Ext.Util.JSON.decode转换成JSON对象

b.为了显示出loading加载效果，在调用Ajax的Request之前，用demo.com.innerHTML和demo.com.className先把目标div设置成"加载中"的字样

ITPub博客

ExtJs-使用XTemplate结合WCF显示数据