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生成的类)

Codeusing 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显示数据相关推荐

区块链学习笔记21——ETH智能合约
区块链学习笔记21--ETH智能合约学习视频:北京大学肖臻老师<区块链技术与应用> 笔记参考:北京大学肖臻老师<区块链技术与应用>公开课系列笔记--目录导航页智能合约简介 ...
OpenCV学习笔记（四十一）——再看基础数据结构core OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记（四十三）——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
OpenCV学习笔记（三十六）——Kalman滤波做运动目标跟踪 OpenCV学习笔记（三十七）——实用函数、系统函数、宏core OpenCV学习笔记（三十八）——显示当前FPS OpenC
OpenCV学习笔记(三十六)--Kalman滤波做运动目标跟踪 kalman滤波大家都很熟悉,其基本思想就是先不考虑输入信号和观测噪声的影响,得到状态变量和输出信号的估计值,再用输出信号的估计误差加 ...
ROS 学习笔记（三）：自定义服务数据srv+server+client 示例运行
ROS 学习笔记(三):自定义服务数据srv+Server+Client 示例运行一.自定义服务数据: 1.向功能包添加自定义服务文件(AddTwoInts.srv) cd ~/catkin_ws/ ...
Kinect开发学习笔记之（四）提取颜色数据并用OpenCV显示
Kinect开发学习笔记之(四)提取颜色数据并用OpenCV显示 zouxy09@qq.com http://blog.csdn.net/zouxy09 我的Kinect开发平台是: Win7 x86 ...
JavaWeb和WebGIS学习笔记（三）——GeoServer 发布shp数据地图
JavaWeb和WebGIS学习笔记(三)--GeoServer 发布shp数据地图系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gi ...
oracle rman ora19602,学习笔记:OracleRMAN备份入门将RMAN备份数据放到nfs远程文件系统中...
天萃荷净 rman通过nfs备份,记录一篇关于使用RMAN备份软件,将RMAN的备份结果集存放到远程的NFS文件系统中 1.RMAN挂载至nfs文件系统 [root@oracleplus tmp]# ...
（实验12）单片机，STM32F4学习笔记，代码讲解【OLED显示实验】【正点原子】【原创】
文章目录其它文章链接,独家吐血整理实验现象主程序 OLED初始化程序代码讲解其它文章链接,独家吐血整理 (实验3)单片机,STM32F4学习笔记,代码讲解[按键输入实验][正点原子][原创] ...
ExtJs学习笔记(3)_GridPanel[XML做数据源]
这一节,将学习到除了用JSON做GridPanel的数据源外,还可以使用XML 一.静态示例 1.xml文件内容: <?xml version="1.0" encoding= ...

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

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

最新文章

热门文章