在使用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
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 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 } ); // 指定起始位置以及个数
自定义的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 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 } );
--------------------