在使用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
}
);
--------------------
分享到:
相关推荐
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 检查注册用户名是否存在