目录结构：
index.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath%>/tree.js"></script>
<script type='text/javascript' src='<%=basePath%>/js/DWRTreeLoader.js'></script>
<script type='text/javascript' src='<%=basePath%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=basePath%>/dwr/interface/TreeService.js'></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
tree.js文件
Ext.onReady(function() {
var root = new Ext.tree.AsyncTreeNode({
id : "root",
leaf : false,
text : "树的根"
});
var loader = new Ext.tree.DWRTreeLoader({
dataUrl:TreeService.getAllChildren
})
var viewTree = new Ext.tree.TreePanel({
id : 'vtree',
renderTo : "tree",
root : root,
loader : loader,
width : 200,
height : 300,
title : "动态遍历树",
useArrows : true,//是否使用箭头样式
autoScroll : true,//滚动条
animate : true,//展开,收缩动画
rootVisible : true,//根节点是否可见
// enableDD : true,//是否可以拖放节点
tbar : [{
tooltip : "重新加载",
icon : "extjs&dwr_Tree/images/icons/reload-green.png",
cls : "x-btn-text-icon",
handler : function() {
viewTree.getRootNode().reload()
}
}, "-", {
icon : "extjs&dwr_Tree/images/icons/expand-all.gif",
cls : "x-btn-text-icon",
tooltip : "全部展开",
handler : function() {
viewTree.getRootNode().expand(true)
}
}, {
icon : "extjs&dwr_Tree/images/icons/collapse-all.gif",
cls : "x-btn-text-icon",
tooltip : "全部折叠",
handler : function() {
viewTree.getRootNode().collapse(true)
}
}],
tools : [{
id : 'refresh',
handler : function() {
var tree = Ext.getCmp('vtree');
tree.body.mask("数据加载中..",
"x-mask-loading");
tree.root.reload();
tree.root.expand(true, false,
function() {
tree.body.unmask();
});
}
}],
region : "west",
collapseMode : "mini",
collapsible : true,//面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
margins : "0 0 0 0",
split : true,
border : true
});
});
Node类:
package test;
public class Node {
private int id;
private String text;
private boolean leaf;
public Node(int id, String text,boolean leaf) {
this.id = id;
this.text = text;
this.leaf = leaf;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
}
TreeService类：
package test;
import java.util.ArrayList;
import java.util.List;
public class TreeService {
public List getAllChildren(String parentId) {
List list = new ArrayList();
if (parentId.equals("root")) {
list.add(new Node(1,"子节点1",false));
list.add(new Node(2,"子节点2",false));
list.add(new Node(3,"子节点3",false));
list.add(new Node(4,"儿子节点4",false));
list.add(new Node(5,"子节点5",false));
list.add(new Node(6,"而子节点6",false));
} else if (parentId.equals("2")) {
list.add(new Node(9,"孙子节点9",true));
list.add(new Node(7,"孙子节点7",true));
list.add(new Node(8,"孙子节点8",true));
} else if (parentId.equals("4")) {
list.add(new Node(11,"孙子节点11",true));
list.add(new Node(12,"孙子节点12",true));
list.add(new Node(13,"孙子节点13",true));
} else if (parentId.equals("6")) {
list.add(new Node(21,"孙子节点21",true));
list.add(new Node(22,"孙子节点22",true));
list.add(new Node(23,"孙子节点23",true));
}
return list;
}
}
DWRTreeLoader.js文件：
Ext.tree.DWRTreeLoader = function(config) {
Ext.tree.DWRTreeLoader.superclass.constructor.call(this, config);
};
Ext.extend(Ext.tree.DWRTreeLoader, Ext.tree.TreeLoader, {
args:[],
requestData : function(node, callback) {
if (this.fireEvent("beforeload", this, node, callback) !== false) {
var callParams = new Array();
var success = this.handleResponse.createDelegate(this, [node, callback], 1);
var error = this.handleFailure.createDelegate(this, [node, callback], 1);
callParams.push(node.id);
callParams.push({callback:success, errorHandler:error});
this.transId=true;
this.dataUrl.apply(this, callParams);
} else {
if (typeof callback == "function") {
callback();
}
}
},
processResponse : function(response, node, callback){
try {
for(var i = 0; i < response.length; i++){
var n = this.createNode(response[i]);
if(n){
node.appendChild(n);
}
}
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
},
handleResponse : function(response, node, callback){
this.transId = false;
this.processResponse(response, node, callback);
this.fireEvent("load", this, node, response);
},
handleFailure : function(response, node, callback){
this.transId = false;
this.fireEvent("loadexception", this, node, response);
if(typeof callback == "function"){
callback(this, node);
}
}
});
web.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.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>
dwr.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<dwr>
<allow>
<create javascript="TreeService" creator="new">
<param name="class" value="test.TreeService"></param>
</create>
<convert converter="bean" match="test.Node" />
</allow>
</dwr>
显示结果：
