ExtJs结合Dwr的tree

tntxia

浏览: 1506830 次
性别:
来自: 深圳

最近访客更多访客>>

wyx065747

u012363178

buptyutao

songhait

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB编程

DWR EXT JavaScript Servlet JavaEE

目录结构：

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>

显示结果：

分享到：

项目重构 | 漫画类网站收集

2010-11-01 23:20
浏览 3717
评论(1)
分类:Web前端
查看更多

1 楼 tracy-hzz 2013-07-30

引用

[i][/i]

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论