ʹÓÃExtJS GridPanel´Ó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;
    }  
}

<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>