ExtJs + Struts2 + JSON 程序总结

http://www.cnblogs.com/qg1019/archive/2009/12/15/1624507.html

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();

} );

分类: 架构篇

« 上一篇： java可变参数
» 下一篇： mysql、sqlserver、oracle分页，java分页统一接口实现