ext 일반 트리의 정적 실현

4551 단어 htmlext
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();
}


);

좋은 웹페이지 즐겨찾기