ExtJs + Struts2 + JSON 程序总结
最近一直都在看EXTJS的东西，然后自己实践了下，界面倒是蛮漂亮的，但是一旦涉及到与服务器端进行数据互动麻烦就出来了，本来下了个例子确发现是用DWR的，觉得我既然用了STRUTS2作为MVC的框架，我觉得这个框架还是很不错的，觉得还是把EXTJS整合到一起更好些，找了相关的资料，跟着前辈做了下例子，发现完全不是那么回事，只好自己慢慢摸索，终于把数据交互的问题解决了，所以记录之以便查阅！
还是从底层开始说吧，拿最经典的例子来解说吧，订单和客户的关系显然是n：1的关系，我hibernate不是用的声明方式所以就用的xml方式做的那么相应的hbm.xml文件如下：
ORDER.XML
<?xmlversion="1.0"?>
<!DOCTYPEhibernate-mappingPUBLIC
"-//Hibernate/HibernateMappingDTD3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<classname="com.model.Order"table="t_order"lazy="false">
<idname="orderId"column="OrderId">
<generatorclass="uuid.hex"/>
</id>
<propertyname="name"column="Name"type="string"/>
<propertyname="desn"column="Desn"type="string"/>
<propertyname="booktime"column="Booktime"type="string"/>
<propertyname="company"column="Company"/>
<many-to-onelazy="false"name="custom"column="CustomId"class="com.model.Customer"/>
</class>
</hibernate-mapping>CUSTOM.XML
<?xmlversion="1.0"?>
<!DOCTYPEhibernate-mappingPUBLIC
"-//Hibernate/HibernateMappingDTD3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<classname="com.model.Custom"table="t_custom"lazy="false">
<idname="customId"column="Id">
<generatorclass="uuid.hex"/>
</id>
<propertyname="customName"column="Name"type="string"/>
</class>
</hibernate-mapping>
相应的MODEL的JAVA我就不写了，只是做个例子而已，呵呵！相应的DAOSERVICE我都不写了，这个不是我讨论的范围，那么我想在页面上显示所有的信息，那么在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方法如下：
importjava.text.DateFormat;
importjava.text.ParseException;
importjava.text.SimpleDateFormat;
importjava.util.Date;
importjava.util.List;
importnet.sf.json.*;
//具体的那些serivce的包引入我就省略了
publicclassOrderActionextendsActionSupport
{
privatestaticfinallongserialVersionUID=-5092865658281004791L;
privateIOrderSerivceorderSerivce;
privateStringjsonString;//这个就是中转站了
privateList<Order>orderList;//这个是数据链表
privateinttotalCount;//这个是extjs用来分页
publicStringgetJsonString()
{
returnjsonString;
}
publicvoidsetJsonString(StringjsonString)
{
this.jsonString=jsonString;
}
publicintgetTotalCount()
{
returntotalCount;
}
publicvoidsetTotalCount(inttotalCount)
{
this.totalCount=totalCount;
}
publicList<Air>getOrderList()
{
returnorderList;
}
publicvoidsetOrderList(List<Order>orderList)
{
this.orderList=orderList;
}
publicvoidsetOrderSerivce(OrderSerivceorderSerivce)
{
this.orderSerivce=orderSerivce;
}
publicStringgetAllAir()
{
orderList=orderSerivce.getOrderAll();
this.setTotalCount(orderList.size());
JSONArrayarray=JSONArray.fromObject(orderList);
//哈哈，就是在这里进行转换的
this.jsonString="{totalCount:"+this.getTotalCount()+",results:"+array.toString()+"}";
returnSUCCESS;
}
}接下来再是什么，哦，是的，应该是STRUTS的配置了，哈哈
<!DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<packagename="order"extends="struts-default">
<actionname="getAllOrder"class="orderAction"method="getAllOrder">
<resultname="success">jsondata.jsp</result>
</action>
</package>
</struts>好的，看到jsondata.jsp了么，这里就是要放数据的地方，看看是什么吧！
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<s:propertyvalue="jsonString"escape="false"/>是的，就是这么简单的一个代码！终于要到前台了，该露脸了，呵呵，前台代码最关键的也就是JS代码，那么我也就只贴JS了相信大家看过后都会自己弄清楚的！
/**//*
*ExtJSLibrary2.1
*Copyright(c)2006-2008,ExtJS,LLC.
*
*http://extjs.com/license
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
Ext.QuickTips.init();
varxg=Ext.grid;
//这里就是设置解析格式的地方，一定要和你的Model一样，要不然可是什么都得不到哦~~~~
varrd=newExt.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'}
]
});
vards=newExt.data.Store({
proxy:newExt.data.HttpProxy
({url:'getAllOrder.action',method:'POST'}),//Url很关键，我就是因为没配好这个，POST方法很重要，你可以省略，让你看下错误也行的！耽误了一大堆时间！
reader:rd
});
ds.load();
varsm=newxg.CheckboxSelectionModel();//CheckBox选择列
varcm=newxg.ColumnModel([
newExt.grid.RowNumberer(),//行号列
sm,
{id:'orderId',header:"订单号",dataIndex:'name'},{header:"订单时间",dataIndex:'booktime'},
{header:"订单公司",dataIndex:'company'},
{header:"客户姓名",dataIndex:'customName'}
]);
cm.defaultSortable=true;
////////////////////////////////////////////////////////////////////////////////////////
//OrderGrid
////////////////////////////////////////////////////////////////////////////////////////
varordergrid=newxg.GridPanel({
ds:ds,
sm:sm,
cm:cm,
width:1000,
height:500,
frame:true,
title:'FramedwithCheckboxSelectionandHorizontalScrolling',
iconCls:'icon-grid',
renderTo:document.body
});
ordergrid.render();
});