ExtJs+Struts 2+JSONプログラムまとめ
ExtJs+Struts 2+JSONプログラムまとめ
最近ずっとEXTJSのものを見て、それから自分で実践して、インタフェースはとてもきれいですが、サーバー側とデータのやり取りに関わると面倒が出てきます.もともと例を挙げてDWRを使っていることに気づきました.STRUTS 2をMVCのフレームワークとして使った以上、このフレームワークはいいと思います.EXTJSを統合したほうがいいと思います.関連資料を探して、先輩について次の例を挙げました.全然そうではないことに気づきました.自分でゆっくり模索して、やっとデータのやり取りの問題を解決しました.だから、記録して調べます.
やはり底から話しましょう.最も古典的な例を持って説明しましょう.注文と取引先の関係は明らかにn:1の関係です.私のhibernateは声明方式ではありません.だからxml方式で作ったのです.それに対応するhbmです.xmlファイルは次のとおりです.
対応するMODELのJAVAは私は书かないで、ただ例をして、ほほほ!対応するDAO SERVICEは書きません.これは私の議論の範囲ではありません.では、ページにすべての情報を表示したいと思います.では、OrderActionでgetAllOrderの方法を定義し、struts 2構成actionを通じてEXTJSとサーバデータをデータ交差させます.EXTJSはJSONデータフォーマットをサポートしているので、JSON-LIB(json-lib-2.2.1-jdk 15.jar)というものを使いましたが、他の3つのパッケージ:commons-beanutils-1.7.1-20061106にも依存しています.jar,commons-collections-3.2.1.jar,ezmorph-1.0.4.jar.はい、準備はすべて東風に欠けています.私のgetAllOrderの方法は以下の通りです.
はい、jsondataが見えます.jspですか、ここがデータを置く場所です.何なのか見てみましょう.
<%@ page language="java"import="java.util.*"pageEncoding="utf-8"%>
<%@ taglib prefix="s"uri="/struts-tags"%>
はい、こんなに簡単なコードです!やっとフロントに着いて、颜を出すべきで、ほほほ、フロントコードの最も肝心なのはJSコードで、それでは私もJSだけを贴って、みんなが见た后にすべて自分で明らかにすることができることを信じます!
最近ずっとEXTJSのものを見て、それから自分で実践して、インタフェースはとてもきれいですが、サーバー側とデータのやり取りに関わると面倒が出てきます.もともと例を挙げてDWRを使っていることに気づきました.STRUTS 2を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
<?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>
対応するMODELのJAVAは私は书かないで、ただ例をして、ほほほ!対応するDAO SERVICEは書きません.これは私の議論の範囲ではありません.では、ページにすべての情報を表示したいと思います.では、OrderActionでgetAllOrderの方法を定義し、struts 2構成actionを通じてEXTJSとサーバデータをデータ交差させます.EXTJSはJSONデータフォーマットをサポートしているので、JSON-LIB(json-lib-2.2.1-jdk 15.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"%>
はい、こんなに簡単なコードです!やっとフロントに着いて、颜を出すべきで、ほほほ、フロントコードの最も肝心なのは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();
});