ext js配合dwr在java中的用法

1. ext： http://extjs.com/deploy/ext-1.0.1/docs/在这里可以了解ext的具体用法,和一些demo,example。
2. dwr：http://getahead.org/dwr/documentation 
3. dwr例子：https://dwr.dev.java.net/files/documents/2427/39350/ajaxtm.rar
4. 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，或有什么好的想法可一跟贴。