最近一直都在看EXTJS的东西，然后自己实践了下，界面倒是蛮漂亮的，但是一旦涉及到与服务器端进行数据互动麻烦就出来了，本来下了个例子确发现是 用DWR的，觉得我既然用了STRUTS2作为MVC的框架，我觉得这个框架还是很不错的，觉得还是把EXTJS整合到一起更好些，找了相关的资料，跟着 前辈做了下例子，发现完全不是那么回事，只好自己慢慢摸索，终于把数据交互的问题解决了，所以记录之以便查阅！

       还是从底层开始说吧，拿最经典的例子来解说吧，订单和客户的关系显然是n：1的关系，我hibernate不是用的声明方式所以就用的xml方式做的那么相应的hbm.xml文件如下：

ORDER.XML 

CUSTOM.XML

     相应的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
     
       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
      
        getOrderList()    {        return orderList;    }    public void setOrderList(List
       
         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的配置了，哈哈

           
      
                   
        
         jsondata.jsp
                
             
      
     

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

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

 是的，就是这么简单的一个代码！终于要到前台了，该露脸了，呵呵，前台代码最关键的也就是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();});