ExtJs树TreePanel

1.创建一个简单(静态)的树
 
Java代码  
/**   
   创建一个简单(静态)的树   
 */    
function createSimpleTreePanel(){     
    //因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).     
    var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点     
    var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点     
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));     
    vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));     
    var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点     
    vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.     
    vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.     
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板     
        renderTo: document.body,//绑定在body元素上.     
        width: 300,     
        height: 200,     
        root: vRoot     
    });     
}    
 
2.创建异步简单树
Java代码  
/**   
   创建异步简单树   
 */    
function createSimpleTreeLoader(){     
    //创建一个由treeLoader.js定义的节点结构[{...},{...}]     
    var vNode = new Ext.tree.TreeLoader({url:'../js/treeLoader.js'});     
    //创建一个根节点,将上面定义的子节点结构与根节点绑定.     
    var vRoot = new Ext.tree.AsyncTreeNode({text: '根节点',loader: vNode}) ;     
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板     
        renderTo: document.body,//绑定在body元素上.     
        width: 300,     
        height: 200,     
        root: vRoot//绑定根节点.     
    });     
}    
 
3.创建动态(从JSP文件动态载入)树
 
Java代码  
/**   
   创建动态(从JSP文件动态载入)树   
 */    
function createSimpleDynamicTreeLoader(){     
    //创建一个节点,节点的结构由JSP文件提供     
    var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});     
    //为该节点添加beforeload(点击节点之前触发)事件监听器.     
    vNode.on("beforeload",function(myLoader,node){     
        //myLoader.baseParams.parentId是为treeLoader.jsp传递参数,参数名为parentId,可以自己取名.node代表正要点击的节点对象     
        myLoader.baseParams.parentId = node.id=='root'?"":node.text;     
    }) ;     
    var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根节点',loader: vNode}) ;     
    var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板     
        renderTo: document.body,//绑定在body元素上.     
        width: 300,     
        height: 200,     
        root: vRoot//绑定根节点.     
    });     
}    
 4.用到的文件 treeLoader.js
Java代码  
[{text:'子节点1'},{text:'子节点2',leaf:true}]   
 5.用到的文件 treeLoader.jsp
 
Java代码  
<%@ page language="java" contentType="text/html; charset=UTF-8"    
    pageEncoding="UTF-8"%>     
<%     
    String parentId = request.getParameter("parentId") ;     
System.out.println(parentId) ;     
    if("".equals(parentId) || parentId==null){     
        out.print("[{text:\'北京\'},"+"{text:'辽宁'}]");     
    }else if("北京".equals(parentId)){     
        out.print("[{text: \'朝阳\',leaf: true},"+"{text: '东城',leaf: true}]");     
    }else if("辽宁".equals(parentId)){     
        out.print("[{text: \'沈阳\',leaf: true},"+"{text: '大连',leaf: true}]");     
    }     
%>    
 
 
6.载入
 
Java代码  
//Ext.onReady(createSimpleTreePanel);//创建一个简单(静态)的树     
//Ext.onReady(createSimpleTreeLoader);//创建异步简单树     
Ext.onReady(createSimpleDynamicTreeLoader);//创建动态树