ExtJs树TreePanel

1.创建一个简单(静态)的树

 

/**  
   创建一个简单(静态)的树  
 */  
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.创建异步简单树

/**  
   创建异步简单树  
 */  
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文件动态载入)树

 

/**  
   创建动态(从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

[{text:'子节点1'},{text:'子节点2',leaf:true}] 

 5.用到的文件 treeLoader.jsp

 

<%@ 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.载入

 

//Ext.onReady(createSimpleTreePanel);//创建一个简单(静态)的树   
//Ext.onReady(createSimpleTreeLoader);//创建异步简单树   
Ext.onReady(createSimpleDynamicTreeLoader);//创建动态树