引用
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});
分享到:
相关推荐
xjs dwr spring 强强联姻 博文链接:https://lib.iteye.com/blog/150208
是Ext+Dwr+Spring的完美结合。 表格中的数据是通过DWRProxy加载共分3中形式,用以下3中解析器来解析的: DWRJsonReader DWRArrayReader DWRXmlReader 数据完全由JAVA方法返回,由DWR动态调用,利用了Spring作为Bean...
如何实现前台使用Ext技术,dwr作为通信通道后Ext的分页问题,主要采用DWRProxy实现。
dwrproxy.js 博文链接:https://cicada-it.iteye.com/blog/102949
ext结合dwr的简单使用,直接部署就可以使用
一个ext+dwr 的例子
用ext和dwr实现可以动态删改节点的树形菜单,可以修改节点的相对位置,具有很强的实用性。
EXT+DWR分页 ,前人基础修改,绝对能用 有问题的大家相互交流, 具体使用请参考我的文章EXT+DWR分页
Spring_Ext_DWR_Project,基于spring,ext,dwr,内附详细的注解,完整的代码,直接copy到使用,大家学习使用
ext、dwr、hibernate的整合
用到的技术包括Spring,ext,dwr等,数据库是mysql5.0。包含简单的三个Case:人事管理,机构管理,用户管理,适合初学者熟悉spring ext dwr.
EXT + DWR 的小例子。在MYECLIPS 上运行。很有借鉴意义
一个很好的ext+dwr+spring案例!
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
NULL 博文链接:https://docs.iteye.com/blog/324687
ext和dwr同为ajax框架,各有所长,现在两个配合感觉还是不错的。配合有几种方法,我这是比较简单的一种。
Java ibatis ext spring DWR SQL全套PDF 开发java学习资料
1.DWR 和 Ext 简单例子综合(EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本)) 2.EXT 2 表格编辑控件示例(静态页面,与Java无关版本) 3.文档团队在线通讯录(Ext + DWR + MySQL 4.DWR 检查注册用户名是否存在