extjs_TreePanel的使用
一直觉得短信平台中群发短信时通讯簿的选择号码方式不太好用，因此想找一个好用的 tree 控件。用过 dtree ，简单但功能不够强大（节点不能带 checkbox ）。所以就试了下大名鼎鼎的 ext 库，其中的 treepanel 果然十分强大，完全满足我的需要：
1、 节点带 checkbox ，方便选择多个号码；
2、 当选择 / 反选父节点时，自动选择 / 反选其下的所有子节点；
3、 树的模型数据可以来自 json ，也可以来自 xml ；
4、 Ext 库对事件的支持十分全面，如特有的 checkchange 事件；
5、 跨浏览器支持，目前在 ie 和 firefox 下都调试通过。
一、准备工作
1 、首先需要下载 ext 库，我目前使用的版本是 ext-2.2.1.zip ，解压缩后，我们需要的只是以下几个目录和文件：
Adaper/ext
Resource
ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js
在应用程序发布目录下建一个 extjs 目录，然后把上述内容拷贝至其中。
2 、另外，要正确解析 json ，我们还需要 org.json.jar 这个包。把它拷贝到 web-inf/lib 目录下。
3 、示例程序。在应用程序发布目录下建一个 tree 目录，把 tree.jsp 和 treesample.jsp 放到其中。
二、在页面中引用 ext 库，并使用 treepanel 组件
打开 tree.jsp 页面，首先如果你不想看到菜单里的中文都变成一堆乱码的话，在
第一行加上：
<%@ page contentType="text/html; charset=gbk" %>
然后是导入 ext 库，注意 href 中的脚本位置，如果你的 ext 库所在位置跟本文不一样，请修改它，其中 ext-all-debug.js 在发布时可以改为 ext-all.js ：
<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>
接下来是在脚本中生成 ext treepanel 组件：
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/vista/s.gif'; // 选择模板 :vista
var tree = null;
Ext.onReady(function(){
var Tree = Ext.tree;
tree = new Tree.TreePanel({
el:'tree-div', // 树显示的位置 ,dom 元素的 id
autoScroll:true,
animate:false,
enableDD:false, // 是否支持拖拽
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'treesample.jsp'
}) ,
rootVisible: false
});
注意其中红色字体部分， TreeLoader 通过 ajax 方式请求一个 url ，以获得树的 model 。 Model 的数据类型可以是 json ，也可以是 xml 。本文采用 json 方式。
当然，为了达到更好的效果，还定义了一个 ext 事件，用于实现勾选 / 反选父节点时自动勾选 / 反选所有子节点：
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
另外定义的两个 js 函数，一个实现打印选择的所有节点的 id 值，一个实现展开 / 折叠全部子节点，根据需要进行定义。
最后，需要在 body 中定义 tree 需要显示的位置：
<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid c3daf9;"></div>
三、获取节点数据
Treepanel 需要的节点数据由 treesample.jsp 提供，大部分的代码集中在这里。其实也很简单，就是从数据库中 select 数据，然后通过 org.json.JSONArray 和 org.json.JSONObject 对象构造一个 json 树组，具体内容看源代码。
杨宏焱 2009-12-4
详细源代码、ext库、jar包等都已经上传到资源 里。