ExtJs组合Dwr的tree
日期：2014-05-16 浏览次数：20385 次
目录结构：
?
?
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();
??? ??? ??? ??? ???
