前幾天我們項目組讨論給**公司關于**産品做一個功能展示的用例。讨論到view層時，用那種架構。最終選中了大名鼎鼎的EXT JS 架構來做view。這裡的view涉及的不是很複雜。因為它僅僅是個Demo。最常用的就是分頁顯示資料了。目前extjs僅僅支援xml和json兩種格式的資料展現。就性能而言。Extjs不可能用于較大的項目。性能确實不敢恭維。這裡我們僅僅簡單的介紹一下它的分頁原理。其實他的源碼中提供了大量的例子。可以參考一下。該例子就是基于它的官方例子實作的。目前，市場是比較流行的資料關于extjs就是“深入淺出extjs“了，該書編寫的卻是不怎麼樣。如果想學習extjs，最好研究研究它的源碼的例子就行了。
Jar包如下：
其中json-lib-2.2.1-jdk1.5.jar xstream-1.3.jar是轉換集合類型轉換json類型的主要jar包。
測試工程的包路徑如下：
該示例是用strus2做的mvc。
action類：
package action;
import bean.Bean;
import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.*;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.struts2.ServletActionContext;
import util.ExtHelper;
public class DisplayAction extends ActionSupport
{
private static final Log log=LogFactory.getLog(DisplayAction.class);
private static final long serialVersionUID = 1L;
private HttpServletResponse response;
private HttpServletRequest request;
private int start;
private int limit;
//表示資料庫中資料總條數，使用者分頁顯示
private static final long totalResult=100;
public String display() throws Exception
{
List list=new ArrayList();
for(int i=0;i<5;i++){
bean.Bean bean=new Bean();
bean.setId(i);
bean.setDetail("detil"+i);
bean.setTitle("title"+i);
list.add(bean);
}
String json = ExtHelper.getJsonFromList(totalResult,list);
log.info("list轉換成json格式的資料開始");
log.info(json);
response = ServletActionContext.getResponse();
response.setContentType("application/xml;charset=UTF-8");
response.getWriter().write(json);
return null;
}
}
Po類：
package bean;
public class Bean {
private int id;
private String title;
private String detail;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDetail() {
return detail;
}
public void setDetail(String detail) {
this.detail = detail;
}
}
ExtHelper類：
package util;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONObject;
import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.io.xml.DomDriver;
public class ExtHelper {
public static String getXmlFromList(long recordTotal , List beanList) {
Total total = new Total();
total.setResults(recordTotal);
List resultlist = new ArrayList();
resultlist.add(total);
resultlist.addAll(beanList);
XStream sm = new XStream(new DomDriver());
for (int i = 0; i < resultlist.size(); i++) {
Class c = resultlist.get(i).getClass();
String b = c.getName();
String[] temp = b.split("\\.");
sm.alias(temp[temp.length - 1], c);
}
String xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + sm.toXML(resultlist);
System.out.println("**********************************"+xml);
return xml;
}
public static String getJsonFromList(long recordTotal , List ListbeanList){
TotalJson total = new TotalJson();
total.setResults(recordTotal);
total.setItems(ListbeanList);
JSONObject JsonObject = JSONObject.fromObject(total);
return JsonObject.toString();
}
}
TotalJson類：
package util;
import java.util.List;
public class TotalJson {
private long results;
private List items;
public List getItems() {
return items;
}
public void setItems(List items) {
this.items = items;
}
public long getResults() {
return results;
}
public void setResults(long results) {
this.results = results;
}
}
Struts.xml
<!DOCTYPE struts PUBLIC '-//Apache Software Foundation//DTD Struts Configuration 2.0//EN'
'http://struts.apache.org/dtds/struts-2.0.dtd'>
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="ext_fenye" extends="struts-default">
<action name="getDataList" class="action.DisplayAction" method="display"></action>
</package>
</struts>
JSP:
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<title>ExtJs-FenYe</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/resources/css/ext-all.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/pagesExt/css/style.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all.js"></script>
<script type="text/javascript" src=""${pageContext.request.contextPath}/pagesExt/ext-2.2.1/ext-all-debug.js"> </script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
//定義資料集對象
var typeStore = new Ext.data.Store({//配置分組資料集
autoLoad :{params : {start:0,limit : 6}},
//預設加載參數：start=0，limit=6
reader: new Ext.data.JsonReader({
totalProperty: "results",
root: "items",//和action的list的名稱一緻。
id: "id"
},
Ext.data.Record.create([
//對一個po的屬性名稱
{name: 'id'},
{name: 'title'},
{name: 'detail'}
])
),
proxy : new Ext.data.HttpProxy({
//URL:struts.xml中配置該action
url : 'getDataList.action'
})
})
//分頁工具欄
var pagingBar = new Ext.PagingToolbar({//分頁工具欄
store : typeStore,
pageSize :6,//每頁顯示的條數。用于系統自動計算它的start值
displayInfo : true,
displayMsg : '資料從第{0}條 - 第{1} 條 共 {2}條資料',
emptyMsg : "沒有記錄"
})
//建立Grid表格元件
var cb = new Ext.grid.CheckboxSelectionModel()
var bookTypeGrid = new Ext.grid.GridPanel({
applyTo : 'grid-div',//定位到id=“grid-div”
frame:true,
store: typeStore,//與前面定義的資料存儲器名稱一緻
width:580,
height:400,
viewConfig : {
autoFill : false
},
sm:cb,
columns: [//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 50
}),//表格行号元件
cb,
{header: "編号", width: 50, dataIndex: 'id', sortable: true},
{header: "名稱", width: 150, dataIndex: 'title', sortable: true},
{header: "說明", width: 250, dataIndex: 'detail', sortable: true}
],
//分頁工具欄
bbar: pagingBar//分頁引用，作為button。前面有定義
})
});
</script>
<body>
<div id='grid-div'/>
</body>
</html>
![Ajax——模闆引擎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)