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

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

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

Ext.onReady(function()

{
3

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

var tpl = new Ext.XTemplate(
22

'Name: {name}',
23

'Title: {title}',
24

'Company: {company}',
25

'[Kids:] ',
26

'<tpl for="kids">',//表明这里循环读取kids节的数据
27

'　　{name}',
28

'</tpl>',
29

'[Drinks:] ',
30

'<tpl for="drinks">',
31

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

'</tpl>'
33

);
34

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

});
37

</script>

运行结果图:

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

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

Code
using System.Collections.Generic;
using System.Runtime.Serialization;


namespace Ajax_WCF
{
    [DataContract]
public class Person
    {
        [DataMember]
public string name { set; get; }
        [DataMember]
public string title { set; get; }
        [DataMember]
public string company { set; get; }
        [DataMember]
public string email { set; get; }
        [DataMember]
public string address { set; get; }
        [DataMember]
public string city { set; get; }
        [DataMember]
public string state { set; get; }
        [DataMember]
public string zip { set; get; }
        [DataMember]
public List<AbstractData> drinks { set; get; }
        [DataMember]
public List<KidData> kids { set; get; }
    }


    [DataContract]
public class AbstractData
    {
        [DataMember]
public string name { set; get; }
    }


    [DataContract]
public class KidData : AbstractData
    {
        [DataMember]
public int age { set; get; }
    }
}

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

<%@ ServiceHost Language="C#" Debug="true" Service="Ajax_WCF.MyService" CodeBehind="MyService.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory"%>
b.web.config中，也参考下面修改
<behavior name="Ajax_WCF.MyServiceAspNetAjaxBehavior">
 <webHttp />
 
 </behavior>

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

Code
[OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetPerson", Method = "*")]
public Person GetPerson() {
            System.Threading.Thread.Sleep(3000);//为演示loading效果，停3秒
            return new Person() {
                name = "Jack Slocum",
                title = "Lead Developer",
                company = "Ext JS, LLC",
                email = "jack@extjs.com",
                address = "4 Red Bulls Drive",
                city = "Cleveland",
                state = "Ohio",
                zip = "44102",
                drinks = new List<AbstractData> { 
new AbstractData(){name="Red Bull"},
new AbstractData(){name="Coffee"},
new AbstractData(){name="Water"}
                },
                kids = new List<KidData> { 
new KidData(){name="Red Bull",age=3},
new KidData(){name="Coffee",age=2},
new KidData(){name="Water",age=0}
                }
            };
        }

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

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

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>XTemplate示例</title>
<link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css"/> 
<script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="js/ext2.2/ext-all.js"></script> 
<style type="text/css">
        body{font-size:9pt;padding:20px;}
        .red{color:red;}
        h1{padding-bottom:10px;}
</style>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function() {        

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>',
'<p>[Drinks:] ',
'<tpl for="drinks">',
'<p>　　{#}.{name}</p>', 
'</tpl></p>'
        );

var demo = Ext.get("demo");
        demo.dom.innerHTML = "数据加载中，请稍候";
        demo.dom.className = "red";

        Ext.Ajax.request({
            url: "MyService.svc/GetPerson",
            method: "GET",
            success: function(request) {
                demo.dom.className = "";
var data = Ext.util.JSON.decode(request.responseText);
                tpl.overwrite("demo", data);
            },
            failure: function() {
                alert("failure!");
            }
        });       

    });
</script>   
<h1>XTemplate 示例</h1>
<div id="demo" style="border:1px solid #ccc;padding:10px;width:300px"></div>
</body>


</html>

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

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

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

运行效果如下：

转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/09/09/1287767.html

这回运行时，增加了"数据加载中"的效果，加载成功后与刚才的静态示例显示结果完全相同