Ext的DWRProxy应用事例

最新推荐文章于 2017-06-23 09:32:36 发布

转载最新推荐文章于 2017-06-23 09:32:36 发布 · 342 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文介绍如何在Ext中集成DWR技术实现前后端交互。包括配置DWR、创建服务接口、前端JS调用及后台Java实现。

Ext的DWRProxy应用事例

博客分类：
Ext

EXT DWR Servlet Bean JavaScript

1.导入dwr的相关包,在web.xml文件中进行dwr配置

    Xml代码  
    
   
 <servlet>  
   <servlet-name>dwr-invoker</servlet-name>  
   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>  
   <init-param>  
    <param-name>config-dwr</param-name>  
    <param-value>/WEB-INF/dwr/dwr.xml</param-value>  
   </init-param>  
   <init-param>  
    <param-name>debug</param-name>  
    <param-value>false</param-value>  
   </init-param>  
   <load-on-startup>7</load-on-startup>  
 </servlet>  
 <servlet-mapping>  
   <servlet-name>dwr-invoker</servlet-name>  
   <url-pattern>/dwr/*</url-pattern>  
 </servlet-mapping>  

2.配置dwr.xml文件，以下配置仅供参考

    Xml代码  
    
   
 <?xml version="1.0" encoding="UTF-8"?>  
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"   
 "http://getahead.org/dwr/dwr20.dtd">  
 <dwr>  
     <init>  
     </init>  
     <allow>  
         <convert converter="bean" match="com.rms.dao.*"/>  
         <convert converter="bean" match="com.rms.util.SelectItem"/>  
         <convert converter="bean" match="com.rms.model.*"/>  
         <convert converter="bean" match="com.rms.service.*"/>  
         <convert converter="bean" match="com.rms.webapp.*"/>  
         <convert converter="exception" match="java.lang.Exception"/>  
         <convert converter="bean" match="java.lang.StackTraceElement" />  
         <!-- 专卖局查询 -->  
         <create javascript="rmRegieOrgService" creator="spring">  
             <param name="beanName" value="rmRegieOrgService"/>  
         </create>  
     </allow>  
     <signatures>  
     <![CDATA[ 
      import java.util.Map; 
      import java.util.List; 
      import javax.servlet.http.HttpSession;  
      rmAbnormalCustVisitService.saveRmAbnormalCustVisitDetail 
                                     (String,String,List<Map>);      
     ]]>  
     </signatures>  
 </dwr>  

3.web前端JS导入及调用

    Js代码  
    
   
 <script type='text/javascript' src="${ctx}/dwr/engine.js"></script>  
 <script type='text/javascript' src="${ctx}/dwr/util.js"></script>  
 <script type="text/javascript" src="${ctx}/include/widgets/ext/DWRProxy.js">  
 </script>  
 <script type="text/javascript" src="${ctx}/dwr/interface/rmRegieOrgService.js">  
 </script>  
 //JS调用  
 var store = new Ext.data.Store({  
     proxy: new Ext.data.DWRProxy(rmRegiePersonService  
                                 .getRmRegiePersonByDeptCode),  
     reader: new Ext.data.ListRangeReader({  
         totalProperty: 'totalCount',  
         root: 'items',  
         id:'personCode'},  
         new Ext.data.Record.create([  
            {name: 'personCode', mapping: 'personCode'},  
             {name: 'personName',mapping: 'personName'}  
         ])           
     )  
 )  

4.后台java代码，参数形式为Map<String,String),如果不是，需在dwr.xml文件中进行声明配置。

    Java代码  
    
   
 public ListRange getRmRegiePersonByDeptCode(Map<String,String> map){  
     List list =  rmRegiePersonDao.getRmRegiePersonByDeptCode(map);  
     Map map1 = new HashMap();  
     map1.put("personCode", "");  
     map1.put("personName", "所有人员");  
     list.add(map1);  
     return new ListRange(list,list.size());  
 }  

    Java代码  
    
   
 public class ListRange implements Serializable {  
     // 记录列表  
     private List items;  
     // 记录总数  
     private long totalCount;  
     // 每页记录数  
     private long pageSize;  
     // 第几页(1~N)  
     private long pageNo;  
     public ListRange() {  
     }  
     public ListRange(List items, long totalCount) {  
         this.items = items;  
         this.totalCount = totalCount;  
     }  
     // get,set省略  
 }  