在使用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
大衛 閱讀(6944)
評論(1) 編輯 收藏 所屬分類:
Java 、
JavaScript