ext树

最近有个部门的数据数据结构，需要展现，要用到树，自己写树比较麻烦，于是借用刚看不久的EXT的树，来展现。

后台是spring 2.0 mvc + hibernate 。通过发布 ***.do ,把后台组织好的json放到Response里面，在通过ext的TreeLoader({dataUrl:'group.do?action=getAllNodes'}), 获取数据。

环境是 ext2.0 + spring2.0 + hibernate3.0

(1)mytree.js

var TreeTest = function(){
    // shorthand
    alert("treetest");
    var Tree = Ext.tree;
        return {
        init : function(){
            // yui-ext tree            
          var tree = new Tree.TreePanel({
                el:'tree',
                animate:true,
                autoScroll:true,
                loader: new Tree.TreeLoader({dataUrl:'group.do?action=getAllNodes'}),
                enableDD:true,
                containerScroll: true,
                rootVisible:false,
                dropConfig: {appendOnly:true}
            });

         //添加双击事件
             tree.on('DblClick', function(node){
             var txt_up = document.getElementById('txt_up');
             var hidden_up = document.getElementById('hidden_upid');
             hidden_up.value=node.id;
        
             txt_up.value=node.text;
            var btn_save=document.getElementById("btn_save");
            btn_save.focus();
    
           document.getElementById('tree').style.display='none';
       
        }
   );

  //添加某节点展开事件
   tree.on('expandnode', function(node){
      document.getElementById('tree').focus();
   });

   //添加某节点收缩事件
   tree.on('collapsenode', function(node){
        document.getElementById('tree').focus();
   });
  
   //由于树没有onblur 隐藏不了，只能想这么个办法来解决，希望朋友给我一个好的方法来隐藏这个树
   Ext.get('tree').on('blur',function(){
      var left = document.getElementById('tree').offsetLeft;
    var top = document.getElementById('tree').offsetTop;
    var width = document.getElementById('tree').offsetWidth;
    var height = document.getElementById('tree').offsetHeight;
    var windowx = window.event.x;
    var windowy = window.event.y;
    if((left + width)>windowx&&(top+height)>windowy)
    {
     //alert("left= " + left +"  "+"top="+top + "width="+width+"height="+height +"window x="+ window.event.x);
  
    }
    else
    {
     document.getElementById('tree').style.display='none';
    }
    
   });
            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree, {folderSort:true});
           
            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: 'root',
                draggable:false, // disable root node dragging
                id:'0'
            });
            tree.setRootNode(root);
           
            // render the tree
            tree.render();
           
            root.expand(false, /*no anim*/ false);
            
            }
    };

}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

(2)tree.html

<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<%@ taglib uri="http://www.springframework.org/tags/form"  prefix="form"%>

<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="scripts/us/mytree.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">
    #tree{
     
     width:250px;
     height:250px;
     
    }
    .folder .x-tree-node-icon{
  background:transparent url(scripts/ext/resources/images/default/tree/folder.gif);
 }
 .x-tree-node-expanded .x-tree-node-icon{
  background:transparent url(scripts/ext/resources/images/default/tree/folder-open.gif);
 }
    </style>

<form name="groupForm" method="post" action="group_save.do">

<input type="hidden" name="id" id="id" >
 

<div >名称 ：<input type="text" name="name" id="name" onfocus="document.getElementById('tree').style.display='none'"></div>

<div >上级 ：<input id="txt_up" type="text" name="txt_upId"  onfocus="document.getElementById('tree').style.display='block';document.getElementById('tree').focus();">
   <input id="hidden_upid" type="hidden" name="upId">
   <input id="btn_save" type="button" name="save"  onClick="onSubmitCheck();" value="保存">
</div>   
<div id="tree" style="display='none'">
</div>  

<div ></div>
</form>
  
<c:if test="${map.group !=null}">  
 <script type="text/javascript">
  document.getElementById("txt_up").value="<c:out value='${map.group.up.name}' />";
  document.getElementById("hidden_upid").value="<c:out value='${map.group.up.id}' />";
  document.getElementById("name").value="<c:out value='${map.group.name}' />";
   document.getElementById("id").value="<c:out value='${map.group.id}' />";
 </script>
</c:if>

 <script type="text/javascript">
  
  function  onSubmitCheck(){

   var text_up_value=document.getElementById("txt_up").value;
   
   
   if(text_up_value=="")
   {
    alert('请选择上级部门名称！');
    return false;
   }
   var name_value=document.getElementById("name").value;
   
   if(name_value=="")
   {
    alert('请输入部门名称！');
    return false;
   }    
   
   document.groupForm.submit();
  }
 
 </script>