ext js配合dwr在java中的用法

ExtJS与DWR数据交互

最新推荐文章于 2025-11-23 23:32:04 发布

最新推荐文章于 2025-11-23 23:32:04 发布 · 146 阅读

文章标签：

#EXT #DWR #Java #数据结构 #Ajax

本文介绍如何使用ExtJS和DWR实现前后端数据交互。重点在于自定义Ext.data.DWRProxy，使DWR能与ExtJS进行数据交换。通过示例展示了记录类型映射及数据存储结构创建。

ext：http://extjs.com/deploy/ext-1.0.1/docs/在这里可以了解ext的具体用法,和一些demo,example。
dwr：http://getahead.org/dwr/documentation
dwr例子：https://dwr.dev.java.net/files/documents/2427/39350/ajaxtm.rar
dwr 介绍ppt: https://dwr.dev.java.net/files/documents/2427/39353/ajax_transportation_methods.ppt

了解了这两个技术后我们来看看它们之间是怎样一个数据流入处理过程。

要想让dwr与ext有数据上的交互，我们可以看下，ext对数据的处理过成，因为这两个交互最主要的就是一个数据怎么流入，和流出的过程。分析ext的结构，发发现ext里面有一个专门对数据类型转化的处理，就是在ext.data下面的这些：
ArrayReader； Connection； DataProxy； HttpProxy； JsonReader； MemoryProxy； Node； Record； ScriptTagProxy； SimpleStore； SortTypes； Store； Tree； XmlReader；
在这里面有可以对许多类型进行转化，但是没有dwr的，这就需要自己根据他们的结构来继承一个：代码在附件中，这个是我在yahoo上看到的。

嵌入这个js后，我们就可以开始把dwr的数据放到ext里面来了。

For example:

//一个纪录类型mapping
var recordType = Ext.data.Record.create([

{name: "name",mapping:"name", type: "string"},

{name: "id",mapping: "id"}, 

{name: "realname",mapping:"realName", type: "string"},

{name: "createtime",mapping:"createTime", type: "date"},

]);

//一个数据存储的结构吧。

// create the Data Store

var ds = new Ext.data.Store({

// load using DWRProxy

proxy: new Ext.data.DWRProxy(memberService.listMember, true),

// create reader that reads the Topic records

reader: new Ext.data.ListRangeReader({

totalProperty: 'totalSize',
            id: 'id'

}, recordType),

// turn on remote sorting

remoteSort: true,
        sortInfo:{field: 'id', direction: 'DESC'}

});

结合附件上定义的Exit.data.DWRProxy 和Ext.data.ListRangeReader。来看一下具体的操作过程；

上面划下划线鲜红部分，是dwr的数据流进点，通过js调用service层java代码，来返回数据，放到dwr结构里面存放。

这里只是一个简单的数据流程，当然要想弄清楚，这个过程到底是怎么走，这个就要去看ext原码了，还没仔细研究，正在努力中。所以这里的文章避免不了，一些错误之处，希望大家发现bug，或有什么好的想法可一跟贴。

【转贴】http://cicada-it.iteye.com/blog/102949
ext js配合dwr在java中的用法