第二节：ExtJS调用WCF系列-----分页排序列表实现

打开第一节中的那个项目，新建一个Paging.aspx的页面来实现分页列表。
这次我们使用一个测试的数据库CompanyInfoDB,里面有两张表，部门和员工，并外键关联，数据库调用采用Linq的Sqlmetal 命令方式，在Visual Studio 2008的命令提示符中输入以下命令：D:\Program Files\Microsoft Visual Studio 9.0\VC>sqlmetal /conn:server=172.16.1.52;database=CompanyInfoDB;uid=sa;pwd=sa123456 /map:c:\LinqTemp\CompanyInfoDB.map
/code:c:\LinqTemp\CompanyInfoDB.cs /serialization:Unidirectional
然后把生成的CompayInfo.map 文件和CompanyInfo.cs文件加入到项目中，并添加System.Data.Linq的引用，还要修改一下Web.Config 加入数据库链接字符串和XmlMappingSource文件的位置。
<connectionStrings>
  <add name="CompanyInfoDBConnectionString" connectionString="Data Source=172.16.1.52;Initial Catalog=CompanyInfoDB;Persist Security Info=True;User ID=sa;Password=sa123456" providerName="System.Data.SqlClient"/>
 </connectionStrings>
<appSettings>
    <add key="CompanyInfoDBXmlMappingSource" value="E:\ExtJS\ExtJS调用WCF系列博客源文件\ExtJSAndWCFChapter1\ExtJSAndWCFChapter1\DataBase\CompanyInfoDB.map"/>
  </appSettings>

  如图：
为了层次更清晰一点，我们新建一个EmployeeBL.cs的类文件来处理Employee的业务逻辑，EmpployeeBL.cs的文件代码如下：

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.Linq.Mapping;
using System.IO;
using System.Linq.Dynamic;
using System.Runtime.Serialization;

namespace ExtJSAndWCFChapter1
{
    public class EmployeeBL
    {
        CompanyInfoDB ctx;

        //构造函数
        public EmployeeBL()
        {
            XmlMappingSource xms = XmlMappingSource.FromXml(File.ReadAllText(ConfigurationManager.AppSettings["CompanyInfoDBXmlMappingSource"]));
            ctx = new CompanyInfoDB(ConfigurationManager.ConnectionStrings["CompanyInfoDBConnectionString"].ConnectionString, xms);
            //ctx.Log = Console.Out;
        }

        public string GetEmployeePaging(int start, int limit, string sort, string dir)
        {
            string strJsonSource = "";
            var query = from emp in ctx.Employee
                        select new
                        {
                            EmployeeID = emp.EmployeeID,
                            CnName = emp.CnName,
                            Sex = emp.Sex,
                            Age = emp.Age,
                            Email = emp.Email,
                            OnWorkDate = emp.OnWorkDate,
                            DeptName = emp.Department.CnName
                        };
            query = query.OrderBy(sort + " " + dir);
            int TotalCount = query.Count(); //共有记录数
            int PageNum = start / limit;  //共有页数 
            int PageSize = limit;         //每页记录数
            query = query.Skip(PageSize * PageNum).Take(PageSize);
           
            string JsonSource = query.ToJSON();                      //当前页记录转成JSON格式
            strJsonSource = @"{""TotalCount"":""" + TotalCount + "";
            strJsonSource = strJsonSource + @""",""EmployeeList"":" + JsonSource + "}";
            return strJsonSource;
        }
    }
}

这里需要两个类文件：Dynamic.cs 和 JSONHelper.cs  前者是微软提供的Linq动态查询文件，后者是scottgu的JSON序列化文件。
并在EmployeeService.svc.cs 文件中加入获取员工的分页排序方法，代码如下

 /**//// <summary>
        /// Employee分页排序
        /// </summary>
        /// <param name="start"></param>
        /// <param name="limit"></param>
        /// <param name="sort"></param>
        /// <param name="dir"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/GetEmployeePaging")]
        public string GetEmployeePaging(int start, int limit, string sort, string dir)
        {
            if (start < 0 || sort == "") throw new ArgumentException("参数错误！");
            EmployeeBL bl = new EmployeeBL();
            return bl.GetEmployeePaging(start, limit, sort, dir);
        }

接下来我们编写客户端代码，这次我们新建一个paging.js的文件来存放Paging.Aspx的脚本文件，ExtJS调用WCF的时候有两点须注意：
第一点：关于前一节中
        [WebInvoke(BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Get")]中的BodyStyle = WebMessageBodyStyle.Bare  和
        [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/GetAll")]中的BodyStyle = WebMessageBodyStyle.Wrapped的区别，看前一节的两个例子，我们不难发现两个返回值的不同之处：
Get:
{"Age":28,"Birthday":"\/Date(286732800000+0800)\/","CnName":"Xiaozhuang","Email":"[e-mail]","EmployeeID":"b34f963e-8520-44da-be00-bd0a1aeadc78","Sex":true}
GetAll:
{"GetAllResult":[{"Age":28,"Birthday":"\/Date(286732800000+0800)\/","CnName":"CnName","Email":"[e-mail]","EmployeeID":"2835ba7e-5f0c-41ff-8746-d6e959800850","Sex":true},{"Age":28,"Birthday":"\/Date(286732800000+0800)\/","CnName":"CnName1","Email":"[e-mail]","EmployeeID":"d5b7a088-13a8-4195-8ce9-e0836cd33de4","Sex":false}]}
可以看到GetAll 的返回值给加了一个GetAllResult的根对象，但是这个根对象在ExtJS调用的时候是不需要的，必须去掉这个根对象才行，那么我们为什么不用WebMessageBodyStyle.Bare非要用BodyStyle = WebMessageBodyStyle.Wrapped？那是因为前者只有在WCF方法只有一个输入参数，而且不需要对其进行序列化的时候才可以使用，但是很多方法要求都不止一个参数，所以必须用后者。那我们怎样才能去掉这个根对象呢？在http://erichauser.net/?p=35有个去掉这个根对象的方法，不过他提供的那个文件有问题，不能达到预期的效果，经过调试，我把文件WCFJsonReader.js进行了改进，代码如下：

/**//**   
 * @class Ext.data.WCFJsonReader  
 * @extends Ext.data.JsonReader 
 * 
 * Custom reader for reading data from WCF.  If you are using WebMessageBodyStyle.Wrapped, then WCF adds a root object to your   
 * JSON result: 
 *    
 * { "MethodResult": { "Count" : 0, "Objects": [ … ] } }   
 *  
 * Ext does not expect the result to have a root object before parsing, so this class will remove it.    
 */  
  Ext.data.WCFJsonReader = Ext.extend(Ext.data.JsonReader, {  
    /**//* @cfg {Boolean} Sets whether or not the OperationContract has the is using WebMessageBodyStyle.Wrapped */  
      wrapped: true,   
    /**//**  
     * If wrapped is set to true, we will strip WCF’s wrap object    
     */  
       read : function(response){
        var json = response.responseText;
        var o = eval("("+json+")");
        if(!o) {
            throw {message: "JsonReader.read: Json object not found"};
        }
      if (this.wrapped) {  
          for (var prop in o) {  
              if (typeof(prop) == 'string' && prop.substr(prop.length-6,prop.length) == 'Result') {  
                  o = this.convert(o[prop]); 
                  //o = o[prop]; 
                  break; 
              } 
          } 
     } 
     if(o.metaData){ 
         delete this.ef; 
         this.meta = o.metaData;  
         this.recordType = Ext.data.Record.create(o.metaData.fields);  
         this.onMetaChange(this.meta, this.recordType, o); 
     }  
     return Ext.data.WCFJsonReader.superclass.readRecords.call(this, o); 
     }, 
     //private   
     convert : function(o) {  
         o = eval("("+o+")");
         var newResult = new Object(); 
         for (var rootProp in o) {  
             newResult[rootProp] = o[rootProp];  
         }  
         return newResult;  
      }  
  });

在调用WCF的时候，用这个WCFJsonReader.js代替原始的JsonReader就可以了。
第二点：我们在调用WCF的时候要指明Content-type是application/json，而且参数必须要进行JSON序列化才可以，但是在ExtJS提供的分页排序例子中输入参数是直接由GridPanel提供的，所以我们必须截获这些参数，并对它进行JSON序列化，由此我建立了一个WCFHttpProxy.js的文件，这个文件继承自Ext.data.HttpProxy并重载了它的load方法，在这个方法里截获输入参数，并对它们进行JSON序列化。代码如下：

/**//*
 * Ext JS Library 2.0 RC 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 * 
 * http://extjs.com/license
 */

/**//**
 * Author by xiaozhuang
 */
Ext.data.WCFHttpProxy = Ext.extend(Ext.data.HttpProxy, {  

    load : function(params, reader, callback, scope, arg){
        if(this.fireEvent("beforeload", this, params) !== false){

            Ext.lib.Ajax.defaultPostHeader = 'application/json';
            params = Ext.util.JSON.encode(params);
            var  o = {
                params : params || {},
                request: {
                    callback : callback,
                    scope : scope,
                    arg : arg
                },
                reader: reader,
                callback : this.loadResponse,
                scope: this
            };
            if(this.useAjax){
                Ext.applyIf(o, this.conn);
                if(this.activeRequest){
                    Ext.Ajax.abort(this.activeRequest);
                }
                this.activeRequest = Ext.Ajax.request(o);
            }else{
                this.conn.request(o);
            }
        }else{
            callback.call(scope||this, null, arg, false);
        }
    }
});

 

其实就是增加了Ext.lib.Ajax.defaultPostHeader = 'application/json';params = Ext.util.JSON.encode(params);两行。

有了这两个文件，我们要改进一下我们的EXTJS，在它的目录下建立WCF的文件夹，并把这两个文件拷贝进去。
现在我们可以编写客户端代码了，Paging.aspx的代码如下：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Paging.aspx.cs" Inherits="ExtJSAndWCFChapter1.Paging" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
     <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>
      <!-- ExtJS调用WCF的专用文件 -->
    <script type="text/javascript" src="ExtJS/WCF/WCFHttpProxy.js"></script>
    <script type="text/javascript" src="ExtJS/WCF/WCFJsonReader.js"></script>
      <!-- 简体中文语言包 -->
    <script type="text/javascript" src="ExtJS/source/locale/ext-lang-zh_CN.js"></script>
     <!-- 分页排序ExtJS代码 -->
    <script type="text/javascript" src="paging.js"></script>
    
    <!-- Common Styles for the examples -->
 <style type="text/css">
        body .x-panel {}{
            margin-bottom:20px;
        }
        .icon-grid {}{
            background-image:url(ExtJS/icons/fam/grid.png) !important;
        }
        #button-grid .x-panel-body {}{
            border:1px solid #99bbe8;
            border-top:0 none;
        }
        .add {}{
            background-image:url(ExtJS/icons/fam/add.gif) !important;
        }
        .option {}{
            background-image:url(ExtJS/icons/fam/plugin.gif) !important;
        }
        .remove {}{
            background-image:url(ExtJS/icons/fam/delete.gif) !important;
        }
        .save {}{
            background-image:url(ExtJS/icons/save.gif) !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   <h1>Paging Grid Example</h1><br /><br />


<div id="topic-grid"></div>
    </form>
</body>
</html>

  Paging.js的代码如下：

 

/**//*

 * Author by Xiaozhuang

 * 

 * 
 */
Ext.onReady(function(){
   
    // create the Data Store
    var store = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.WCFHttpProxy({
            url: '/EmployeeService.svc/GetEmployeePaging'
        }),
     
        // create reader that reads the Topic records
        reader: new Ext.data.WCFJsonReader({
            root: 'EmployeeList',
            totalProperty: 'TotalCount',
            id: 'EmployeeID',
            fields: [
                {name: 'EmployeeID', type: 'int'},
                {name: 'CnName', type: 'string'},
                {name: 'Sex', type: 'string'},
                {name: 'Age', type: 'int'},
                {name: 'Email', type: 'string'},
                {name: 'OnWorkDate',type:'string'},
                {name: 'DeptName', type: 'string'}
            ]
        }),

        // turn on remote sorting
        remoteSort: true
    });
    
    store.setDefaultSort('EmployeeID', 'ASC');

    // 把true和false转化为男或者女，这个其实可以在服务器端进行转化，写在这里只是为了测试
    function renderSex(value, p, record){
    return record.data.Sex=="true"?"男":"女";
    }
    //这个函数演示了怎样把服务器端的DateTime类型转为Javascript的日期
    function renderOnWorkDate(value, p, record){
        var jsondate = record.data.OnWorkDate;
       return eval("new " + jsondate.substr(1,jsondate.length-2)).toLocaleDateString();
    }

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var nm = new Ext.grid.RowNumberer();
    var sm = new Ext.grid.CheckboxSelectionModel();  // add checkbox column

    var cm = new Ext.grid.ColumnModel([nm,sm,{
           header: "员工ID",
           dataIndex: 'EmployeeID',
           width: 100
//           renderer: renderTopic
       },{
           header: "姓名",
           dataIndex: 'CnName',
           width: 200
        },{
           header: "性别",
           dataIndex: 'Sex',
           width: 70,
           renderer: renderSex
        },{
           header: "年龄",
           dataIndex: 'Age',
           width: 70
           
        },{
         header: "Email",
           dataIndex: 'Email',
           width: 150
        },{
           header: "入职时间",
           dataIndex: 'OnWorkDate',
           width: 150,
           renderer: renderOnWorkDate
        },{
           header: "部门",
           dataIndex: 'DeptName',
           width: 200
          
        }]);

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        //el:'topic-grid',
        renderTo: document.body,
        width:800,
        height:500,
        title:'分页和排序列表',
        store: store,
        cm: cm,
        trackMouseOver:false,
        sm: sm,
        loadMask: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
               
                return 'x-grid3-row-collapsed';
            }
        },
         // inline toolbars
        tbar:[{
            text:'添加',
            tooltip:'添加一条记录',
            iconCls:'add'
        }, '-', {
            text:'修改',
            tooltip:'修改',
            iconCls:'option'
        },'-',{
            text:'删除',
            tooltip:'删除记录',
            iconCls:'remove',
            handler:handleDelete
        }],
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true
        })
    });
  
    // render it
    grid.render();
   

    // trigger the data store load
    var request={start:0,limit:25};
    store.load({params:request});
    
    
    
    function handleDelete(){
      var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
            if(selectedKeys.length > 0)
            {
                Ext.MessageBox.confirm('提示','您确实要删除选定的记录吗？', deleteRecord);
            }
            else
            {
                Ext.MessageBox.alert('提示','请至少选择一条记录！');
            }//end
    }  
   
    function deleteRecord(btn){
         if(btn=='yes'){
               store.reload();
            }//end if click 'yes' on button
        } // end deleteRecord

        
   
});

运行结果：

源代码下载在这里