ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的<li>或<table>列表而已,这时候XTemplate就显得很有用了。

本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能)

1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs返回分页数据

Code

 


2.DateTime序列化问题,因为.net序列化DateTime时,不管你怎么努力,只要是DateTime类型,最终只能生成类似 "F_Date":"\/Date(1221023588109+0800)\/"这样的字符串,ExtJs并不能正确识别!为此我们需要一个第三方的用于序列化DateTime的小工具Newtonsoft.Json.dll,它是专门用于将对象序列化成Json字符串。重要的是,用这个序列化后的DateTime字符串,ExtJs能够识别(注:百度搜索一下"Newtonsoft.Json"很容易就能找到N多下载的,下载后直接添加到项目引用里即可)

3.编写具体的实体类T_GuestBook,直接在数据库里建好,拖到dbml里就可以了,主要代码如下(注意要设置dbml的序列化属性为"单向",否则vs不会自动为class以及成员加上序列化标签):

Code

为阅读方便,去掉了一些自动生成的代码



4.建一个WCF服务,并添加一个方法:

Code

注意,这里我们返回的是string类型,并且是用JavaScriptConvert.SerializeObject处理后的JSON字符串,至于WebInvoke(ResponseFormat = WebMessageFormat.Json这里为什么要加Json返回格式,原因很简单,不指定Json格式,默认就是以xml返回的,会无端在前后加上更多无用字符


5.ExtJs前端完整代码:

Code

这里有几个要点:
(1).datetime在xtemplate中的格式化写法:{F_Date:date("Y-m-d H:i:s")}
(2).服务端返回字符格式的处理:
因为JavaScriptConvert.SerializeObject(_PageData)这里已经成功序列化了,但是wcf的服务在返回时,必须要有一种格式,要么xml,要么json,所以我们指定了wcf以json格式返回后,会对正常的结果再做一次序列化,最后的结果是使字符串前后都加上了双引号,同时把原来正常的双引号做了转义处理,参考下面的:

正常的Json字符串:
{"RecordCount":6,"PageSize":3,"PageCount":2,"CurrentPageIndex":1,"Data":[{"F_ID":1,"F_IP":"192.23.37.41","F_Date":new Date(1221052494578),"F_Content":"这是第一条留言","F_Reply":""},{"F_ID":2,"F_IP":"192.168.0.1","F_Date":new Date(1221052494578),"F_Content":"这是第二条留言","F_Reply":""},{"F_ID":3,"F_IP":"192.168.0.2","F_Date":new Date(1221052494578),"F_Content":"这是第三条留言","F_Reply":""}]}

服务器返回的Json字符串:
"{\"RecordCount\":6,\"PageSize\":3,\"PageCount\":2,\"CurrentPageIndex\":1,\"Data\":[{\"F_ID\":1,\"F_IP\":\"192.23.37.41\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第一条留言\",\"F_Reply\":\"\"},{\"F_ID\":2,\"F_IP\":\"192.168.0.1\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第二条留言\",\"F_Reply\":\"\"},{\"F_ID\":3,\"F_IP\":\"192.168.0.2\",\"F_Date\":new Date(1221052494578),\"F_Content\":\"这是第三条留言\",\"F_Reply\":\"\"}]}"

所以我们要处理一下,关键代码:
//转换服务器端返回字符串的格式
                        var data = request.responseText;
                        data = data.substr(1);
                        data = data.substr(0, data.length - 1);
                        data = data.replace(/\\\"/g, '"');                       
                        data = Ext.util.JSON.decode(data)

(3).为使分页按钮有效,我们需要在成功返回服务端数据后,为每个分页链接以及按钮加上onClick事件,即这一部分
//开始处理分页按钮/链接事件
                        var oBtnGo = Ext.get("btnGo");
                        var oGoPage = Ext.get("GoPage");
                        oBtnGo.on("click", function() {
                            loadData(iPageSize, oGoPage.dom.value);
                        });

                        var oBtnFirst = Ext.get("btnFirst"); //第一页
                        oBtnFirst.on("click", function() { loadData(iPageSize, 1); })


                        var oBtnPre = Ext.get("btnPre"); //上一页
                        oBtnPre.on("click", function() { loadData(iPageSize, iCurrentPageIndex - 1); })

                        var oBtnNext = Ext.get("btnNext"); //下一页
                        oBtnNext.on("click", function() { loadData(iPageSize, iCurrentPageIndex + 1); })

                        var oBtnLast = Ext.get("btnLast"); //最后一页
                        oBtnLast.on("click", function() { loadData(iPageSize, iPageCount); })

   另外这一段代码的位置,也要留意一下,不能写在其它地方:比如Ajax请求之后,因为当Ajax还未成功返回数据/XTemplate未成功更新时,分页按钮以及链接还没有加载到页面中,这时如果用Ext.get()取对象,Js会报错


   完成了,我们来看下一效果:

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

最后讲一点题外话:
   做完这个后,我在想:单就这个示例而言,这跟直接用asp.net ajax的updatePannel有什么区别,有什么优势呢?相信也有不少人跟我有一样的疑问,后来我想了想,至少有二个好处:
   a.updatepannel默认会引起大量的数据回发,虽然页面没刷新,但是客户端跟服务端之间的传输数据量很大,而用ExtJs+Wcf,除了wcf返回的字符串,就没其它东西了,性能上会提高
   b.相对而言,ExtJs的Ajax请求方式,我觉得比aspx.net ajax的更容易操作.

附:源文件下载(解压后demo/list.html即为运行的演示页面,开发环境:vs2008 sp1 + win2003)

你可能感兴趣的:(template)