在使用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
});//指定起始位置以及个数
自定义的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
});
--------------------
WE准高手
posted on 2008-03-20 13:51
大卫 阅读(6939)
评论(1) 编辑 收藏 所属分类:
Java 、
JavaScript