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);//创建动态树