在使用Ext与DWR框架时，我们往往会用到GridPanel组件搭配PagingToolbar组件来实现翻页数据列表。翻页的时候每一页都要从后台获取该页的数据列表信息。
在解决此问题时，花了不少时间，看过不少前人的代码，终于成功了！共享之。
关键代码如下：
Store为：
1
var ds = new Ext.data.Store(
{
2
3
proxy: new Ext.data.DWRProxy({
4 callback: Folder.getMessageList,
5 params: {
6 start: '0',
7 limit: PAGE_SIZE
8
}
9 }),
10
11 // proxy: new Ext.data.MemoryProxy(messageList),
12
13 reader: new Ext.data.ObjectReader({
14 root: 'messages',
15 totalProperty: 'total'//用来让Ext的PagingToolbar组件分析总页数
16 }, [{
17 name: 'messageId'
18 }, {
19 name: 'from'
20 }, {
21 name: 'subject'
22 }, {
23 name: 'sendTime'
24 }, {
25 name: 'contentText'
26 }])
27
28
});
29
30//在进行DWR请求之前，默认在请求参数中添加当前文件夹ID。这样DWR请求中包括的请求参数为:folderId，start，limit
31ds.on('beforeload', function(){
32 Ext.apply(this.baseParams, {
33 folderId: currentFolderId
34 });
35});
36
37ds.load({
38 params: {
39 start: currentStart,
40 limit: currentLimit
41 }
42 });//指定起始位置以及个数
自定义的DWRProxy和ObjectReader：
1Ext.data.DWRProxy = function(config){
2 Ext.data.DWRProxy.superclass.constructor.call(this);
3 Ext.apply(this, config ||
4 {});
5};
6
7Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
8 //DWR请求
9 load: function(params, reader, callback, scope, arg){
10 currentStart = params.start;//保存当前页记录起始位置
11 currentLimit = params.limit;//保存当前页记录的个数
12 document.dwr = {
13 params: params,
14 reader: reader,
15 callback: callback,
16 scope: scope,
17 arg: arg
18 };
19 //处理请求参数，将各个请求参数转换到Array中
20 var callParams = new Array();
21 callParams.push(params.folderId);//当前文件夹ID
22 callParams.push(params.start);//请求的起始位置
23 callParams.push(params.limit);//请求的个数
24 if (this.params !== undefined && this.params !== null) {
25 this.callback.call(this, callParams, this.loadResponse);//DWR请求
26 }
27 else {
28 this.callback.call(this, this.loadResponse);
29 }
30 },
31 //处理DWR返回
32 loadResponse: function(response){
33 var dwr = document.dwr;
34 try {
35 //IE throws an exception 'Error: TypeError, Object does not support this operation'
36 //so use trycatch to suppress this exception
37 delete document.dwr;//ie不支持delete
38 }
39 catch (e) {
40 }
41 var result;
42 try {
43 result = dwr.reader.read(response);//读取请求返回的json
44 }
45 catch (e) {
46 //this.fireEvent("loadexception",this,dwr,response,e);
47 dwr.callback.call(dwr.scope, null, dwr.arg, false);
48 return;
49 }
50 dwr.callback.call(dwr.scope, result, dwr.arg, true);
51 },
52 failure: function(errorString, exception){
53 console.log("DWR " + exception);
54 },
55 update: function(params, records){
56 }
57});
58
59//自定义一个用于处理返回消息列表的Reader
60Ext.data.ObjectReader = function(meta, recordType){
61 Ext.data.ObjectReader.superclass.constructor.call(this, meta, recordType);
62};
63
64Ext.extend(Ext.data.ObjectReader, Ext.data.DataReader, {
65 //处理DWR返回
66 read: function(response){
67 var responseDecode = Ext.util.JSON.decode(response);//注意，由java的json-lib生成的json串需要解码一下
68 var data = responseDecode.messages;
69 var sid = this.meta ? this.meta.id : null;
70 var recordType = this.recordType, fields = recordType.prototype.fields;
71 var records = [];
72 var root = data;
73 for (var i = 0; i < root.length; i++) {
74 var obj = root[i];
75 var values = {};
76 var id = obj[sid];
77 for (var j = 0, jlen = fields.length; j < jlen; j++) {
78 var f = fields.items[j];
79 var k = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
80 var v = null;
81 var idx = k.indexOf(".");
82 if (idx == -1) {
83 v = obj[k] !== undefined ? obj[k] : f.defaultValue;
84 }
85 else {
86 var k1 = k.substr(0, idx);
87 var k2 = k.substr(idx + 1);
88 if (obj[k1] == undefined) {
89 v = f.defaultValue;
90 }
91 else {
92 var obj2 = obj[k1];
93 v = obj2[k2] !== undefined ? obj2[k2] : f.defaultValue;
94 }
95 }
96 v = f.convert(v);
97 values[f.name] = v;
98 }
99 var record = new recordType(values, id);
100 records[records.length] = record;
101 }
102 return {
103 records: records,//返回的消息列表记录
104 totalRecords: responseDecode.total//总个数
105 };
106 }
107});
--------------------
WE准高手
posted on 2008-03-20 13:51
大卫 阅读(6967)
评论(1) 编辑 收藏 所属分类:
Java 、
JavaScript