最近一直都在看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
<! 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 >
<?
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 >
<! 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的配置了,哈哈
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;
}
}
<!
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了么,这里就是要放数据的地方,看看是什么吧!
"-//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 >
<%
@ page language="java" import="java.util.*" pageEncoding="utf-8"
%>
<% @ taglib prefix="s" uri="/struts-tags" %>
< s:property value ="jsonString" escape ="false" />
是的,就是这么简单的一个代码!终于要到前台了,该露脸了,呵呵,前台代码最关键的也就是JS代码,那么我也就只贴JS了相信大家看过后都会自己弄清楚的!
<% @ taglib prefix="s" uri="/struts-tags" %>
< s:property value ="jsonString" escape ="false" />
/**/
/*
* 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却不露脸的话好好的找找是不是哪儿偷偷多了一个","号呢!
* 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();
} );
欢迎到 http://www.tutu6.com来看看