引用
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});
分享到:
相关推荐
在IT行业中,EXT和DWR的结合是一种常见的前端与后端交互技术,它极大地提高了Web应用的用户体验。EXT是一个强大的JavaScript框架,用于构建富互联网应用程序(RIA),而Direct Web Remoting (DWR)则是一个允许...
标题“ext + dwr proxy”涉及的技术点是EXT JavaScript库与Direct Web Remoting (DWR)框架的结合使用,创建了一个代理服务。EXT是一个用于构建富互联网应用(RIA)的前端JavaScript库,提供了丰富的组件和数据绑定...
"Ext tree 结合dwr 调用后台数据"这个主题涉及到两个关键的技术:Ext JS的Tree组件和Direct Web Remoting (DWR)。这两个技术的结合使得前端用户界面能够动态地展示并操作后台的数据。 首先,让我们来了解一下**Ext ...
是Ext+Dwr+Spring的完美结合。 表格中的数据是通过DWRProxy加载共分3中形式,用以下3中解析器来解析的: DWRJsonReader DWRArrayReader DWRXmlReader 数据完全由JAVA方法返回,由DWR动态调用,利用了Spring作为Bean...
在MYECLIPS环境中运行这个例子,开发者可以方便地调试和测试EXT和DWR的集成效果。MYECLIPS是一款流行的Java集成开发环境,它提供了丰富的功能,如代码编辑、调试、项目管理等,使得开发过程更为高效。 通过学习和...
EXT是一个强大的JavaScript库,用于构建富客户端应用程序,而DWR则是一个允许JavaScript与服务器端Java代码进行异步交互的框架。两者结合,可以创建出交互性强、功能丰富的Web应用。 首先,EXT的TreePanel是实现树...
通过以上分析,我们可以看出"ext-dwr-hibernate"整合的关键在于协调EXT的用户交互、DWR的远程调用以及Hibernate的数据持久化,以构建出高效、易用的Web应用。在实践中,开发者需要对这三个组件有深入的理解,并熟练...
EXT-DWR-SPRING整合详细指导涉及三个主要技术组件:Ext JS 2.2、Direct Web Remoting (DWR) 3以及Spring框架。整合的目标是在Web应用中将这些组件结合起来,以创建具有丰富用户界面的动态Web应用。 整合流程主要...
这个例子可能是为了展示如何利用EXT的组件和DWR的远程调用来创建一个可直接部署并运行的应用。 首先,EXT的主要组件包括表格、表单、面板、树形视图等,它们都具有高度可定制化和响应式设计。在EXT应用中,开发者...
dwrproxy.js 博文链接:https://cicada-it.iteye.com/blog/102949
"EXT+DWR配合简单例子"这个主题,意味着我们将探讨如何将这两者结合,利用EXT的前端能力与DWR的后端通信能力,构建一个功能完善的Ajax应用。一种简单的配合方式可能是: 1. **前端EXT设置**:首先,在EXT应用中创建...
EXT + DWR + Spring 是一个常见的前端与后端交互的集成解决方案,用于构建富客户端的Web应用程序。这个案例中,EXT 提供了丰富的用户界面组件,DWR (Direct Web Remoting) 实现了浏览器与服务器之间的异步通信,而...
其依赖注入特性允许在运行时动态装配对象,提高了代码的可测试性和灵活性。Spring的MVC模式使得Web应用的结构清晰,易于维护。此外,Spring与各种数据库、缓存、消息队列等技术的集成,使得开发大型企业级应用变得...
在当今的Web开发领域,Spring、Ext和Direct Web Remoting (DWR) 是三种非常重要的技术,它们各自在不同的层面发挥着关键作用。Spring作为Java企业级应用的框架,提供了一整套完善的依赖注入(DI)和面向切面编程...
EXT+DWR分页 ,前人基础修改,绝对能用 有问题的大家相互交流, 具体使用请参考我的文章EXT+DWR分页