EXTJS使用DataSet作为数据源的用法

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 传入。在函数中使用正则表达式分别提取日期数据中的“日期”和“时间”部分，拼接后返回。