個人認為，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: '[email protected]',
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生成的類)
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 />
<!--<enableWebScript/>-->
</behavior>
c.在wcf中增加一個方法，代碼如下:
這裡為了簡單起見，直接new并初始化了一個Person對象，然後傳回為JSON格式
3.最後修改一下前面靜态頁的代碼，完整頁面代碼如下:
解釋一下:利用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
這回運作時，增加了"資料加載中"的效果，加載成功後與剛才的靜态示例顯示結果完全相同