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>