最近一直都在看EXTJS的東西，然后自己實(shí)踐了下，界面倒是蠻漂亮的，但是一旦涉及到與服務(wù)器端進(jìn)行數(shù)據(jù)互動(dòng)麻煩就出來(lái)了，本來(lái)下了個(gè)例子確發(fā)現(xiàn)是用DWR的，覺(jué)得我既然用了STRUTS2作為MVC的框架，我覺(jué)得這個(gè)框架還是很不錯(cuò)的，覺(jué)得還是把EXTJS整合到一起更好些，找了相關(guān)的資料，跟著前輩做了下例子，發(fā)現(xiàn)完全不是那么回事，只好自己慢慢摸索，終于把數(shù)據(jù)交互的問(wèn)題解決了，所以記錄之以便查閱！
還是從底層開(kāi)始說(shuō)吧，拿最經(jīng)典的例子來(lái)解說(shuō)吧，訂單和客戶的關(guān)系顯然是n：1的關(guān)系，我hibernate不是用的聲明方式所以就用的xml方式做的那么相應(yīng)的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>
相應(yīng)的MODEL的JAVA我就不寫(xiě)了，只是做個(gè)例子而已，呵呵！相應(yīng)的DAO SERVICE 我都不寫(xiě)了，這個(gè)不是我討論的范圍，那么我想在頁(yè)面上顯示所有的信息，那么在OrderAction中我定義了一個(gè)getAllOrder的方法，然后通過(guò)struts2配置action讓EXTJS與服務(wù)器數(shù)據(jù)進(jìn)行數(shù)據(jù)交互。因?yàn)镋XTJS是支持JSON數(shù)據(jù)格式的，所以我用了JSON-LIB（json-lib-2.2.1-jdk15.jar）這個(gè)東東，它還依賴另外的3個(gè)包：commons-beanutils-1.7.1-20061106.jar，commons-collections-3.2.1.jar，ezmorph-1.0.4.jar。好了萬(wàn)事俱備只欠東風(fēng)了，我的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;//這個(gè)就是中轉(zhuǎn)站了
private List<Order> orderList;//這個(gè)是數(shù)據(jù)鏈表
private int totalCount;//這個(gè)是extjs用來(lái)分頁(yè)
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);
//哈哈，就是在這里進(jìn)行轉(zhuǎn)換的
this.jsonString = "{totalCount:"+this.getTotalCount()+",results:"+array.toString()+"}";
return SUCCESS;
}
}
接下來(lái)再是什么，哦，是的，應(yīng)該是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>
好的，看到j(luò)sondata.jsp了么，這里就是要放數(shù)據(jù)的地方，看看是什么吧！
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:property value="jsonString" escape="false" />
是的，就是這么簡(jiǎn)單的一個(gè)代碼！終于要到前臺(tái)了，該露臉了，呵呵，前臺(tái)代碼最關(guān)鍵的也就是JS代碼，那么我也就只貼JS了相信大家看過(guò)后都會(huì)自己弄清楚的！
/**//*
* 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;
//這里就是設(shè)置解析格式的地方，一定要和你的Model一樣，要不然可是什么都得不到哦~~~~
var rd = new Ext.data.JsonReader({
//總記錄數(shù)
totalProperty: 'totalCount',
//哪兒是數(shù)據(jù)的頭，可以看action里面是怎么定義數(shù)據(jù)格式的，這里就是如何解析的
root: 'results',
//有那些字段呢？
fields:[
{name:'orderId'},
{name:'desn'},
{name:'booktime'},
{name:'company'},
{name:'name'},
//這里就是對(duì)custom對(duì)象進(jìn)行映射的地方
{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很關(guān)鍵，我就是因?yàn)闆](méi)配好這個(gè)，POST方法很重要，你可以省略，讓你看下錯(cuò)誤也行的！耽誤了一大堆時(shí)間！
reader:rd
});
ds.load();
var sm =new xg.CheckboxSelectionModel(); //CheckBox選擇列
var cm =new xg.ColumnModel([
new Ext.grid.RowNumberer(), //行號(hào)列
sm,
{id:'orderId',header: "訂單號(hào)", dataIndex: 'name'}, {header: "訂單時(shí)間", 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();
});
好的，從后臺(tái)到前臺(tái)就是這么多了，大家慢慢來(lái)，一定要細(xì)心，當(dāng)你的頁(yè)面在firefox華麗的運(yùn)行后IE卻不露臉的話好好的找找是不是哪兒偷偷多了一個(gè)"，"號(hào)呢！
歡迎到
http://www.tutu6.com來(lái)看看
