整合ext和dwr 的小例子
第一步：写个index.jsp页面。
<%@ page contentType="text/html;charset=utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dwr与ext整合</title>
</head>
<body>
<h1>dwr与ext整合</h1>
<hr>
<ol>
<li><a href="1.jsp">无侵入式整合dwr和ext</a></li>
<li><a href="2.jsp">DWRProxy</a></li>
<li><a href="3.jsp">DWRTreeLoader</a></li>
<li><a href="4.jsp">DWRProxy和Combobox</a></li>
</ol>
</body>
</html>
第二步：分别写出1、2、3、4.jsp.
1.jsp
<%@ page contentType="text/html;charset=utf-8"%>
<%
String ctx = request.getContextPath();
//String ext = ctx + "/ext-3.0.0";
pageContext.setAttribute("ctx", ctx);
// pageContext.setAttribute("ext", ext);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无侵入式整合dwr和ext</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
<script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'性别',dataIndex:'sex'},
{header:'邮箱',dataIndex:'email'},
{header:'电话',dataIndex:'tel'},
{header:'添加时间',dataIndex:'addTime'},
{header:'备注',dataIndex:'descn'}
]);
var store = new Ext.data.JsonStore({
fields: ["id","name","sex",'email','tel','addTime','descn']
});
// 调用dwr取得数据
infoManager.getResult(function(data) {
store.loadData(data);
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight:true,
store: store,
cm: cm
});
});
</script>
</head>
<body>
<h1>无侵入式整合dwr和ext</h1>
<a href="index.jsp">返回</a>
<hr>
<div id="grid" style="height:300px;"></div>
</body>
</html>
2.jsp
<%@ page contentType="text/html;charset=utf-8"%>
<%
String ctx = request.getContextPath();
//String ext = ctx + "/ext-3.0.0";
pageContext.setAttribute("ctx", ctx);
//pageContext.setAttribute("ext", ext);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DWRProxy</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
<script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
<script type="text/javascript" src="${ctx}/dwr/util.js"></script>
<script type="text/javascript" src="DWRProxy.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';
Ext.onReady(function(){
var info = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'email', type: 'string'},
{name: 'tel', type: 'string'},
{name: 'addTime'},
{name: 'descn', type: 'string'}
]);
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'性别',dataIndex:'sex'},
{header:'邮箱',dataIndex:'email'},
{header:'电话',dataIndex:'tel'},
{header:'添加时间',dataIndex:'addTime'},
{header:'备注',dataIndex:'descn'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
reader: new Ext.data.ListRangeReader({
totalProperty: 'totalSize',
root: 'data',
id: 'id'
}, info),
remoteSort: true
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
//autoHeight: true,
height:500,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load({params:{start:0,limit:10}});
});
</script>
</head>
<body>
<h1>DWRProxy</h1>
<a href="index.jsp">返回</a>
<hr>
<div id="grid" style="height:300px;"></div>
</body>
</html>
3.jsp
<%@ page contentType="text/html;charset=utf-8"%>
<%
String ctx = request.getContextPath();
//String ext = ctx + "/ext-3.0.0";
pageContext.setAttribute("ctx", ctx);
//pageContext.setAttribute("ext", ext);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DWRTreeLoader</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="${ctx}/dwr/interface/treeNodeManager.js"></script>
<script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
<script type="text/javascript" src="${ctx}/dwr/util.js"></script>
<script type="text/javascript" src="DWRTreeLoader.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el: 'tree',
loader: new Ext.tree.DWRTreeLoader({dataUrl: treeNodeManager.getTree})
});
var root = new Ext.tree.AsyncTreeNode({
id: '0',
text:'偶是根'
});
tree.setRootNode(root);
tree.render();
root.expand();
});
</script>
</head>
<body>
<h1>DWRTreeLoader</h1>
<a href="index.jsp">返回</a>
<hr>
<div id="tree" style="height:300px;"></div>
</body>
</html>
4.jsp
<%@ page contentType="text/html;charset=utf-8"%>
<%
String ctx = request.getContextPath();
//String ext = ctx + "/ext-3.0.0";
pageContext.setAttribute("ctx", ctx);
//pageContext.setAttribute("ext", ext);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DWRProxy和ComboBox</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
<script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
<script type="text/javascript" src="${ctx}/dwr/util.js"></script>
<script type="text/javascript" src="DWRProxy.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '${ext}/resources/images/default/s.gif';
Ext.onReady(function() {
var info = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
reader: new Ext.data.ListRangeReader({
totalProperty: 'totalSize',
root: 'data',
id: 'id'
}, info)
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'name',
valueField: 'id',
triggerAction: 'all',
typeAhead: true,
mode: 'remote',
emptyText: '请选择',
selectOnFocus: true
});
combo.render('combo');
});
</script>
</head>
<body>
<h1>DWRProxy和ComboBox</h1>
<a href="index.jsp">返回</a>
<hr>
<div id="combo" style="height:300px;"></div>
</body>
</html>
第三步：
public class Info { //实体类s
private long id;
private String name;
private int sex;
private String email;
private String tel;
private Date addTime;
private String descn;
加上get和set方法。
package dwr;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
public class InfoManager {
private List infoList = new ArrayList();
public InfoManager() {
for (int i = 0; i < 30; i++) {
Info info = new Info();
info.setId(i);
info.setName("name " + i);
info.setSex(i%2);
info.setEmail("xyz20003@gmail.com");
info.setTel("" + i);
info.setAddTime(new Date());
info.setDescn("descn " + i);
infoList.add(info);
}
}
public List getResult() {
return infoList;
}
public ListRange getItems(Map conditions) {
int start = 0;
int pageSize = 10;
// int pageNo = (start / pageSize) + 1;
try {
start = Integer.parseInt(conditions.get("start").toString());
pageSize = Integer.parseInt(conditions.get("limit").toString());
// pageNo = (start / pageSize) + 1;
} catch (Exception ex) {
ex.printStackTrace();
}
int end = start + pageSize;
if (end > infoList.size()) {
end = infoList.size();
}
List list = infoList.subList(start, end);
return new ListRange(list.toArray(), infoList.size());
}
}
package dwr;
import java.io.Serializable;
public class ListRange implements Serializable {
private Object[] data;
private int totalSize;
public ListRange(Object[] data, int totalSize) {
this.data = data;
this.totalSize = totalSize;
}
public Object[] getData() {
return data;
}
public void setData(Object[] data) {
this.data = data;
}
public int getTotalSize() {
return totalSize;
}
public void setTotalSize(int totalSize) {
this.totalSize = totalSize;
}
}
public class TreeNode {
private String id;
private String text;
private boolean leaf;
public TreeNode() {
}
public TreeNode(String id, String text, boolean leaf) {
this.id = id;
this.text = text;
this.leaf = leaf;
}
加上getset方法
package dwr;
import java.util.List;
import java.util.ArrayList;
public class TreeNodeManager {
public List getTree(String id) {
List list = new ArrayList();
String seed1 = id + 1;
String seed2 = id + 2;
String seed3 = id + 3;
list.add(new TreeNode(seed1, "" + seed1, false));
list.add(new TreeNode(seed2, "" + seed2, false));
list.add(new TreeNode(seed3, "" + seed3, true));
return list;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="infoManager">
<param name="class" value="dwr.InfoManager"/>
<include method="getResult"/>
<include method="getItems"/>
</create>
<create creator="new" javascript="treeNodeManager">
<param name="class" value="dwr.TreeNodeManager"/>
<include method="getTree"/>
</create>
<convert converter="bean" match="dwr.Info"/>
<convert converter="bean" match="dwr.ListRange"/>
<convert converter="bean" match="dwr.TreeNode"/>
</allow>
</dwr>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
