ExtJs学习笔记（21）-使用XTemplate结合WCF显示数据

ExtJs学习笔记（21）-使用XTemplate结合WCF显示数据2010-11-16 cnblogs yjmyzz个人认为，XTemplate是中最灵活的用来显示数据的组件，有点类似aspx中的Repeater控件，显示数据的模板完全可以由用户以html方式来定制.

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

1  <script type="text/javascript">
2    Ext.onReady（function（） {
3
4      var data = {
5        name: "Jack Slocum",
6        title: "Lead Developer",
7        company: "Ext JS, LLC",
8        email: "jack@extjs.com",
9        address: "4 Red Bulls Drive",
10        city: "Cleveland",
11        state: "Ohio",
12        zip: "44102",
13        drinks: ["Red Bull", "Coffee", "Water"],
14        kids: [
15  { name: "Sara Grace", age: 3 },
16  { name: "Zachary", age: 2 },
17  { name: "John James", age: 0 }
18]
19      };
20
21      var tpl = new Ext.XTemplate（
22"<p>Name: {name}</p>",
23"<p>Title: {title}</p>",
24"<p>Company: {company}</p>",
25"<p>[Kids:] ",
26"<tpl for="kids">",//表明这里循环读取kids节的数据
27"<p>  {name}</p>",
28"</tpl></p>",
29"<p>[Drinks:] ",
30"<tpl for="drinks">",
31"<p>  {#}.{.}</p>", //表明这里循环读取drinks节的数据,当数据没有属性名称时，用"."代表数据
32"</tpl></p>"
33）;
34      tpl.overwrite（Ext.getBody（）, data）;
35
36    }）;
37  </script>

运行结果图: