使用ExtJS GridPanel从Web Service 获取、绑定和显示数据

本文将向大家介绍一种使用 ExtJS 的 GridPanel 组件从 ASP.NET Web Service 获取 XML 数据并进行绑定和显示的方法。

GridPanel 组件在进行数据绑定时可以接收多种数据格式。其中以 JSON 和 XML 最为常见。如果要给 GridPanel 绑定 JSON 格式的数据（这也是网上“通用”和“热门”的解决方案），那么我们需要修改 Web Service 的 Web.config 设置，将输出数据的格式改为 JSON（默认为 XML。设置方法可参见：http://www.cnblogs.com/regedit/archive/2008/03/04/1089948.html 一文）。

个人认为此方法过于繁琐，为了保证对现有的 Web Service 不做较大的调整，我决定还是继续让其返回 XML 格式的数据。因此在对 GridPanel 进行数据绑定时就要选用 XML 方式绑定了。也就是说，我们在绑定数据时要使用 Ext.data.XmlReader 而不是 Ext.data.JsonReader。具体的实现方法如下：

1. Web Service 部分：

using  System;
using  System.Web;
using  System.Collections;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Configuration;
using  System.Data;
using  System.Data.SqlClient;

[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
public   class  ArticleService : System.Web.Services.WebService {

     //  SQL 连接字符串
     private   readonly   string  _strConn  =  ConfigurationManager.ConnectionStrings[ " Junchieh " ].ConnectionString;

     //  从 start 开始 limit 行，按 sort 字段排序，排序方式为 dir（将传入 "asc" 或 "desc"）
    [WebMethod]
     public  DataSet GetArticles( int  start,  int  limit,  string  sort,  string  dir)
    {
        DataSet ds  =   new  DataSet( " Article " );

         //  从数据库获取数据，放入 record 表
         string  strSql  =   string .Format(
             " select top {0} * from Article where Id not in (select top {1} Id from Article order by {2} {3}) order by {2} {3} " ,
            limit, start, sort, dir);
        SqlDataAdapter da  =   new  SqlDataAdapter(strSql, _strConn);
        DataTable dtRecord  =   new  DataTable( " record " );
         lock  (da)
        {
            da.Fill(dtRecord);
        }
        ds.Tables.Add(dtRecord);

         //  计算总行数，放入 results 表
        DataTable dtResult  =   new  DataTable( " results " );
        dtResult.Columns.Add( " totalRecords " );
        DataRow dr  =  dtResult.NewRow();
         using  (SqlConnection conn  =   new  SqlConnection(_strConn))
         using  (SqlCommand cmd  =   new  SqlCommand( " select count(*) from Article " , conn))
        {
             try
            {
                conn.Open();
                dr[ " totalRecords " ]  =  ( int )cmd.ExecuteScalar();
            }
             catch
            {
                 //  do nothing
            }
        }
        dtResult.Rows.Add(dr);
        ds.Tables.Add(dtResult);

         return  ds;
    }   
}

GetAritcles 将返回一个 DataSet。其内包括两个 DataTable，第一个存放了（跟据 start 和 limit 参数指定的）当前页的数据，另一个存放了数据库中所有数据的行数，供客户端的 GridPanel 组件使用。 客户端部分（节选）：

< script type = " text/javascript " >
Ext.onReady( function (){
    //  列
     var  cm  =   new  Ext.grid.ColumnModel([
        {header: ' ID ' , dataIndex: ' Id ' , sortable: true , width: 10 },
        {header: ' 标题 ' , dataIndex: ' Title ' , sortable: true },
        {header: ' 日期 ' , dataIndex: ' Date ' , sortable: true , width: 50 , renderer:renderDate}   // 在 renderDate 函数中格式化
    ]);

     //  数据 源
     var  store  =   new  Ext.data.Store({
        url:  ' Services/ArticleService.asmx/GetArticles ' ,     //  Web Service 地址
        reader:  new  Ext.data.XmlReader(
            {
                totalRecords:  ' totalRecords ' ,     //  数据总行数。对应于 GetArticles 返回的 DataSet 中的 results 表的 totalRecores 列
                record:  ' record ' ,            //  数据。对应于 GetArticles 返回的 DataSet 中 的 record 表
                id:  ' Id '                           //  主键。对应于 GetArticles 返回的 DataSet 中 的 record 表的 Id 列
            },
            [
                {name:  ' Id ' },
                {name:  ' Title ' },
                {name:  ' Date ' }
            ]
        ),
        remoteSort:  true                           // 服务端排序
    });
    store.setDefaultSort( ' Date ' ,  ' desc ' );    //  默认按 Date 列降序排列
    
     // 分页栏
     var  bbar  =   new  Ext.PagingToolbar(
        {
            pageSize:  4 ,
            store: store,
            displayInfo:  true ,
            displayMsg:  ' 当前显示 {0} - {1} 条，共 {2} 条 ' ,
            emptyMsg:  " 无数据 "
        }
    ); 

     //  GridPanel 组件
     var  grid  =   new  Ext.grid.GridPanel({
        frame:  true ,
        enableHdMenu:  false ,
        width : 600 ,
        height: 300 ,
        title: ' 文章列表 ' ,
        loadMask: {msg: ' 正在加载数据，请稍侯…… ' },
        el:  ' grid ' ,
        store: store,
        cm: cm,
        bbar: bbar,
        viewConfig: {
            forceFit: true
        }
    });
    grid.render();
    store.load({params:{start: 0 ,limit: 4 }});     //  初始时显示第 1 页，每页显示 4 条数据
});

//  格式化日期
//  将 XML 数据中的原始日期数据（如：2008-04-07T14:39:41.02+08:00）格式化成可读的日期（如：2008-04-07 14:39:41）
function  renderDate(value)
{
     var  reDate  =   / /d{4}/-/d{2}/-/d{2} / gi;
     var  reTime  =   / /d{2}:/d{2}:/d{2} / gi;
     return  value.match(reDate)  +   "   "   +  value.match(reTime);
}
< / script>

<!--  GridPanel 组件的显示位置  -->
< div id = " grid "  style = " height:300px; margin:auto; " >< / div>

从 Web Service 中由 GetArticles 方法返回的是 XML 数据。在将数据绑定到 Ext.data.Store 组件时应使用 Ext.data.XmlReader 而不是网上经常看到的 Ext.data.JsonReader。绑定时我们需要“告诉” XmlReader 在 XML 数据中哪些节点代表数据条目（本例为“record”），哪个节点代表数据总数（本例为“totalRecords”），以及数据的主键节点 （本例为“Id”）。您可以通过下图来理解 XmlReader 的数据绑定过程：

另外，从上图中的 XML 数据可以看出，日期（Date）的格式比较“丑陋”，如果不加修饰的话将会原样显示于客户的 GridPanel 组件中。因此在客户端显示数据之前，需要对日期数据进行一下加工。在创建 Ext.grid.ColumnModel 时为 Date 列指定 renderer（注意加粗部分）：

{header: ' 日期 ' ,dataIndex: ' Date ' ,sortable: true ,width: 50 , renderer: renderDate}

代码中的“renderDate”是一个 JavaScript 函数，定义如下：

function  renderDate(value)
{
     var  reDate  =   / /d{4}/-/d{2}/-/d{2} / gi;
     var  reTime  =   / /d{2}:/d{2}:/d{2} / gi;
     return  value.match(reDate)  +   "   "   +  value.match(reTime);
}

此函数中的 value 参数即为原始的日期数据，由 Ext.grid.ColumnModel 传入。在函数中使用正则表达式分别提取日期数据中的“日期”和“时间”部分，拼接后返回。

整个程序执行后的运行界面如下图所示：