Ext结合DWR的关键代码(运行成功的DWRProxy)

阅读更多
引用
http://www.blogjava.net/ITdavid/archive/2008/03/20/187471.html

在使用Ext与DWR框架时,我们往往会用到GridPanel组件搭配PagingToolbar组件来实现翻页数据列表。翻页的时候每一页都要从后台获取该页的数据列表信息。
在解决此问题时,花了不少时间,看过不少前人的代码,终于成功了!共享之。
关键代码如下:

Store为:
1var 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});

你可能感兴趣的:(DWR,EXT,json,IE,F#)