[转]ExtJs + Struts2 + JSON 程序小结

[转]ExtJs + Struts2 + JSON 程序总结

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