ext普普通通树的静态实现 _Web前端

ext普通树的静态实现
基于ext3.x

treeFromOrg.html

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Reorder TreePanel</title>  
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />  
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>  
<script type="text/javascript" src="reorderFromOrg.js"></script>  





</head>  
<body>  
 
<h1>现在要生成一颗动态树</h1>  
<div id="tree-div">  
  </div>  
</body>  
</html>

reorderFromOrg.js

/***********************************  
  创建树  
  参考官方文档  
************************************/  

Ext.onReady(function() { 

   Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/tree/s.gif'

    //Ext.QuickTips.init();  
    var tree=new Ext.tree.TreePanel({  
    el:'tree-div',
    useArrows:true,  
    animate:true,  
    collapsible:true,  
    enableDD:true,  
    containerScroll:true,  
    border:false, 
    autoScroll:true,
    rootVisible:true,
    width:300,
    autoHeight:true
    //useArrows:true
    //height:100

  });  
    
  var root=new Ext.tree.TreeNode({  
      id:"root",  
      text:"集团公司"  
      //expanded:true
  }); 

  var index = 0;

  var subTree = new Ext.tree.TreeNode({
      id:'subTree0',
      text:'子公司',
      listeners:{ 
          //右键事件
          "contextmenu":function(node,e){
              menu = new Ext.menu.Menu([
			      {  
		               text:"添加子节点",  
		               handler:function(){  
		                   var newNodeName = prompt('子节点名称');
						   node.appendChild(
						       new Ext.tree.TreeNode(
						           {
								       id:'subTreeDynamic',
									   text:newNodeName,
									   listeners:{
									   	   "contextmenu":function(node,e){
										       menu2 = new Ext.menu.Menu([
											       {  
										               text:"删除当前节点",  
										               handler:function(){
													       node.destroy();
													   }
												    }
												]);
												menu2.showAt(e.getPoint());	   
										   }
									   }
									   
							       }
								   
							   )
						   );  
		               }  
		          }
			  ]);
              
			  menu.showAt(e.getPoint());

          }


 
      //监听单击事件  
        /*"click":function(node){  
          this.appendChild(new Ext.tree.TreeNode(
                             {
                              id:'subTreeDynamic',
                              text:node.text      
                             } 
                             )

                          );  
        }*/
      }
  });

  var subTree1 = new Ext.tree.TreeNode({
      id:'subTree1',
      text:'子公司1'
  });
  var subTree2 = new Ext.tree.TreeNode({
      id:'subTree2',
      text:'子公司2'
  });
  var subTree3 = new Ext.tree.TreeNode({
      id:'subTree3',
      text:'子公司3'
  });
  var subTree4 = new Ext.tree.TreeNode({
      id:'subTree4',
      text:'子公司4'
  });

  var subTreeLevel2 = new Ext.tree.TreeNode({
      id:'subTreeLevel2',
      text:'2级子公司'
  });
  subTree.appendChild(subTreeLevel2);
  root.appendChild(subTree);
  root.appendChild(subTree1);
  root.appendChild(subTree2);
  root.appendChild(subTree3);
  root.appendChild(subTree4);


  //alert(tree.getRootNode());
  tree.setRootNode(root);//设置根节点
  tree.render();
}


);