在使用Ext与DWR框架时,我们往往会用到GridPanel组件搭配PagingToolbar组件来实现翻页数据列表。翻页的时候每一页都要从后台获取该页的数据列表信息。
在解决此问题时,花了不少时间,看过不少前人的代码,终于成功了!共享之。
关键代码如下:
Store为:
自定义的DWRProxy和ObjectReader:
--------------------
WE准高手
在解决此问题时,花了不少时间,看过不少前人的代码,终于成功了!共享之。
关键代码如下:
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
31
ds.on('beforeload',
function
()
{
32
Ext.apply(this.baseParams,
{
33
folderId: currentFolderId
34
});
35
}
);
36
37
ds.load(
{
38
params:
{
39
start: currentStart,
40
limit: currentLimit
41
}
42
}
);
//
指定起始位置以及个数



2

3



4

5



6

7

8

9

10

11

12

13



14

15

16



17

18



19

20



21

22



23

24



25

26

27

28

29

30

31



32



33

34

35

36

37



38



39

40

41

42

自定义的DWRProxy和ObjectReader:
1
Ext.data.DWRProxy
=
function
(config)
{
2
Ext.data.DWRProxy.superclass.constructor.call(this);
3
Ext.apply(this, config ||
4
{});
5
}
;
6
7
Ext.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 try
catch
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
60
Ext.data.ObjectReader
=
function
(meta, recordType)
{
61
Ext.data.ObjectReader.superclass.constructor.call(this, meta, recordType);
62
}
;
63
64
Ext.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
}
);



2

3

4



5

6

7



8

9



10

11

12



13

14

15

16

17

18

19

20

21

22

23

24



25

26

27



28

29

30

31

32



33

34



35

36



37

38

39



40

41

42



43

44

45



46

47

48

49

50

51

52



53

54

55



56

57

58

59

60



61

62

63

64



65

66



67

68

69

70

71

72

73



74

75



76

77



78

79

80

81

82



83

84

85



86

87

88



89

90

91



92

93

94

95

96

97

98

99

100

101

102



103

104

105

106

107

--------------------
WE准高手