专栏首页菩提树下的杨过ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据

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

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

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

 <script type="text/javascript">
       Ext.onReady(function() {
            var data = {
               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: ['Red Bull', 'Coffee', 'Water'],
               kids: [
   { name: 'Sara Grace', age: 3 },
   { name: 'Zachary', age: 2 },
   { name: 'John James', age: 0 }
]
           };
           var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>[Kids:] ',
'<tpl for="kids">',//表明这里循环读取kids节的数据
'<p>  {name}</p>',
'</tpl></p>',
'<p>[Drinks:] ',
'<tpl for="drinks">',
'<p>  {#}.{.}</p>', //表明这里循环读取drinks节的数据,当数据没有属性名称时,用"."代表数据
'</tpl></p>'
);
           tpl.overwrite(Ext.getBody(), data);
        });
   </script>

运行结果图:

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

1.首先定义一个用于信息传输的实体类(实际开发中,可以是任何可序列化的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 /> <!--<enableWebScript/>-->     </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设置成"加载中"的字样 运行效果如下:

转载请注明来自"菩提树下的杨过"

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webrtc笔记(5): 基于kurento media server的多人视频聊天示例

    这是kurento tutorial中的一个例子(groupCall),用于多人音视频通话,效果如下:

    菩提树下的杨过
  • Effective java 第2版 - 笔记(01) 单例(Singleton)的枚举(enum)实现

    直接上代码: 1 public enum Boss { 2 3 INSTANCE; 4 5 private String name...

    菩提树下的杨过
  • C#:DataTable映射成Model

    这是数据库开发中经常遇到的问题,当然,这可以用现成的ORM框架来解决,但有些时候,如果DataSet/DataTable是第三方接口返回的,ORM就不方便了,还...

    菩提树下的杨过
  • mysql开发规范

    命名规范 库名、表名、字段名必须使用小写字母,并采用下划线分割 库名、表名、字段名禁用超过32个字符。须见名知意 库名、表名、字段名禁用使 MySQL保留字 临...

    lestat
  • Java并发之Executor(返回结果处理)运行多个任务并处理第一个结果运行多个任务并处理所有结果

    并发编程常见的问题,就是当采用多个并发任务来解决一个问题,我们往往只对第一个返回的结果有兴趣。比如,对一个数组有多种排序算法,可以并发启动所有算法,但是对于一个...

    desperate633
  • Android IBinder的linkToDeath介绍及情景模拟

    最近查看Framework源码的时候,读到了AudioService处理音量的流程,在这里碰到了IBinder的linkToDeath()这个知识点,比较感兴趣...

    Frank909
  • 利用JS生成二维码图片,优化WEB性能及页面加载速度

    移动互联网的蓬勃发展绝对离不开二维码的“推波助澜”,一张小小的图片,省去了繁琐的苦逼输入,也拉近了 PC 端和移动端的距离!虽然是东洋人最初发明的,但我还是要给...

    张戈
  • linux nginx服务器环境discuz论坛开启ssl设置完整教程

    discuz程序好像在windows iis系统服务器下可以兼容ssl,但是liunx系统就不行了,需要修改文件代码。 证书申请同样省略了,我不推荐用免费的证...

    速企云
  • Python partition使用技巧

    简单、
  • Spring框架系列(二)之Bean的注解管理

    微信公众号:compassblog 欢迎关注、转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1、Spring中的两种容器 在系列(一)中我们已经知道...

    compassblog

扫码关注云+社区

领取腾讯云代金券