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