當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/9 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

個人認為，XTemplate是ExtJs中最靈活的用來顯示數據的組件，有點類似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>???

運行結果圖:

接下來我們看看如何跟服務器端的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

這回運行時，增加了"數據加載中"的效果，加載成功后與剛才的靜態示例顯示結果完全相同

總結

以上是生活随笔為你收集整理的ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： WS2 安装ubuntu +迁移+vsc
下一篇： java同名函数_浅谈Java 继承接口