ExtJs + Struts2 + JSON 程序总结

最近一直都在看EXTJS的东西，然后自己实践了下，界面倒是 蛮漂亮的，但是一旦涉及到与服务器端进行数据互动麻烦就出来了，本来下了个例子确发现是用DWR的，觉得我既然用了STRUTS2作为MVC的框架，我觉 得这个框架还是很不错的，觉得还是把EXTJS整合到一起更好些，找了相关的资料，跟着前辈做了下例子，发现完全不是那么回事，只好自己慢慢摸索，终于把 数据交互的问题解决了，所以记录之以便查阅！        还是从底层开始说吧，拿最经典的例子来解说吧，订单和客户的关系显然是n：1的关系，我hibernate不是用的声明方式所以就用的xml方式做的那么相应的hbm.xml文件如下：        ORDER.XML 

<? xml version="1.0" ?> <! DOCTYPE hibernate-mapping PUBLIC      "-//Hibernate/Hibernate Mapping DTD 3.0//EN"     "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >           < hibernate-mapping >         < class  name ="com.model.Order"   table ="t_order"  lazy ="false" >             < id  name ="orderId"  column ="OrderId" >                 < generator  class ="uuid.hex"   />             </ id >             < property  name ="name"  column ="Name"  type ="string"   />             < property  name ="desn"  column ="Desn"  type ="string" />             < property  name ="booktime"  column ="Booktime"  type ="string" />             < property  name ="company"  column ="Company"   />             < many-to-one  lazy ="false"  name ="custom"  column ="CustomId"  class ="com.model.Customer"   />         </ class >     </ hibernate-mapping >

        CUSTOM.XML

<? xml version="1.0" ?> <! DOCTYPE hibernate-mapping PUBLIC      "-//Hibernate/Hibernate Mapping DTD 3.0//EN"     "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >       < hibernate-mapping >         < class  name ="com.model.Custom"   table ="t_custom"  lazy ="false" >             < id  name ="customId"  column ="Id" >                 < generator  class ="uuid.hex"   />             </ id >             < property  name ="customName"  column ="Name"  type ="string"   />         </ class >     </ hibernate-mapping >

        相应的MODEL的JAVA我就不写了，只是做个例子而已，呵呵！相应的DAO SERVICE 我都不写了，这个不是我讨论的范围，那么我想在页面上显示所有的信息，那么在OrderAction中我定义了一个getAllOrder的方法，然后通 过struts2配置action让EXTJS与服务器数据进行数据交互。因为EXTJS是支持JSON数据格式的，所以我用了JSON- LIB（json-lib-2.2.1-jdk15.jar）这个东东，它还依赖另外的3个包：commons-beanutils- 1.7.1-20061106.jar，commons-collections-3.2.1.jar，ezmorph-1.0.4.jar。好了万事俱 备只欠东风了，我的getAllOrder方法如下：

import  java.text.DateFormat; import  java.text.ParseException; import  java.text.SimpleDateFormat; import  java.util.Date; import  java.util.List; import  net.sf.json. * ; // 具体的那些serivce的包引入我就省略了 public   class  OrderAction  extends  ActionSupport {     private   static   final   long  serialVersionUID  =   - 5092865658281004791L ;      private  IOrderSerivce orderSerivce;      private  String jsonString; // 这个就是中转站了      private  List < Order >  orderList; // 这个是数据链表      private   int  totalCount; // 这个是extjs用来分页       public  String getJsonString()      {          return  jsonString;     }       public   void  setJsonString(String jsonString)      {          this .jsonString  =  jsonString;     }      public   int  getTotalCount()      {          return  totalCount;     }      public   void  setTotalCount( int  totalCount)      {          this .totalCount  =  totalCount;     }      public  List < Air >  getOrderList()      {          return  orderList;     }      public   void  setOrderList(List < Order >  orderList)      {          this .orderList  =  orderList;     }      public   void  setOrderSerivce(OrderSerivce orderSerivce)      {          this .orderSerivce  =  orderSerivce;     }      public  String getAllAir()      {         orderList  =  orderSerivce.getOrderAll();          this .setTotalCount(orderList.size());                  JSONArray array  =  JSONArray.fromObject(orderList); // 哈哈，就是在这里进行转换的          this .jsonString  =   " {totalCount: " + this .getTotalCount() + " ,results: " + array.toString() + " } " ;      return  SUCCESS;     } }

        接下来再是什么，哦，是的，应该是STRUTS的配置了，哈哈

<! DOCTYPE struts PUBLIC     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"     "http://struts.apache.org/dtds/struts-2.0.dtd" > < struts >        < package  name ="order"  extends ="struts-default" > < action  name ="getAllOrder"  class ="orderAction"  method ="getAllOrder" >              < result  name ="success"   > jsondata.jsp </ result >          </ action >        </ package > </ struts >

        好的，看到jsondata.jsp了么，这里就是要放数据的地方，看看是什么吧！

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " utf-8 " %> <% @ taglib prefix = " s "  uri = " /struts-tags "   %> < s:property  value ="jsonString"  escape ="false"   />

        是的，就是这么简单的一个代码！终于要到前台了，该露脸了，呵呵，前台代码最关键的也就是JS代码，那么我也就只贴JS了相信大家看过后都会自己弄清楚的！

/**/ /*  * Ext JS Library 2.1  * Copyright(c) 2006-2008, Ext JS, LLC.  * licensing@extjs.com  *   * http://extjs.com/license   */ Ext.onReady( function () {     Ext.BLANK_IMAGE_URL  =  'ext / resources / images / default / s.gif';      Ext.QuickTips.init();      var  xg  =  Ext.grid;      // 这里就是设置解析格式的地方，一定要和你的Model一样，要不然可是什么都得不到哦~~~~      var  rd  =   new  Ext.data.JsonReader( {                  // 总记录数                 totalProperty: 'totalCount',                  // 哪儿是数据的头，可以看action里面是怎么定义数据格式的，这里就是如何解析的                                root: 'results',                   // 有那些字段呢？                 fields:[                           {name:'orderId'} ,                                       {name:'desn'},                           {name:'booktime'} ,                           {name:'company'} ,                           {name:'name'} ,                              // 这里就是对custom对象进行映射的地方                                                               {name:'customId' ,mapping:'custom.customId'},                           {name:'customName',mapping:'custom.customName'}                          ]                                      } );       var  ds  =   new  Ext.data.Store( {                                     proxy:  new  Ext.data.HttpProxy ( {url: 'getAllOrder.action',method:'POST'} ), // Url很关键，我就是因为没配好这个，POST方法很重要，你可以省略，让你看下错误也行的！耽误了一大堆时间！                                     reader:rd                                 } );      ds.load();       var  sm  = new  xg.CheckboxSelectionModel();  // CheckBox选择列       var  cm  = new  xg.ColumnModel([                                    new  Ext.grid.RowNumberer(),  // 行号列                                    sm,                                    {id:'orderId',header:  " 订单号 " , dataIndex: 'name'} ,                            {header:  " 订单时间 " ,   dataIndex: 'booktime'} ,                                    {header:  " 订单公司 " , dataIndex: 'company'} ,                                    {header: " 客户姓名 " ,dataIndex:'customName'}                                  ]);                                  cm.defaultSortable  =   true ;      // //      //  OrderGrid       // //      var  ordergrid  =   new  xg.GridPanel( {                                   ds: ds,                                   sm: sm,                                    cm: cm,                                    width: 1000 ,                                   height: 500 ,                                   frame: true ,                                   title:'Framed  with  Checkbox Selection and Horizontal Scrolling',                                   iconCls:'icon - grid',                                   renderTo: document.body                                  } );     ordergrid.render(); } );

        好的，从后台到前台就是这么多了，大家慢慢来，一定要细心，当你的页面在firefox华丽的运行后IE却不露脸的话好好的找找是不是哪儿偷偷多了一个"，"号呢！ 欢迎到http://www.tutu6.com 来看看

posted on 2008-05-25 21:48 Cloud kensin 阅读(6655) 评论(5)  编辑  收藏

<!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="http://www.blogjava.net/tokyo2006/archive/2008/05/25/202776.html" dc:identifier="http://www.blogjava.net/tokyo2006/archive/2008/05/25/202776.html" dc:title="ExtJs + Struts2 + JSON 程序总结" trackback:ping="http://www.blogjava.net/tokyo2006/services/trackbacks/202776.aspx" /> </rdf:RDF> -->

<script type="text/javascript"> //&lt;![CDATA[ Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1')); Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90); //]]&gt; </script>

评论

#   re: ExtJs + Struts2 + JSON 程序总结 2008-06-10 11:49 徐桥

有ExtJs + Struts2 + JSON 的原代码 就做一个增加、删除、修改的案例    回复    更多评论     

#   re: ExtJs + Struts2 + JSON 程序总结[未登录] 2008-11-25 18:10 Y

相关资源：extjs 跟 struts+json