使用ExtJS GridPanel从Web Service 获取、绑定和…

2009-05-12 22:07:14来源：未知阅读 ()

本文将向大家介绍一种使用 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);