在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开发出包含树形信息结构的应用。

本文就是详细介绍树形结构的使用过程和实例。

一、创建一棵树

树控件由Ext.tree.TreePanel类定义，控件的名称为TreePanel，TreePanel类继承自Panel面板，在EXT中使用树控件非常简单，我们先来看一下代码（包含配置信息）。

?

view plaincopy to clipboardprint?
  1. <html?xmlns="http://www.w3.org/1999/xhtml"?>??
  2. <head?id="Head1"?runat="server">??
  3. ????<title>简单的树形</title>??
  4. ????<link?rel="stylesheet"?type="text/css"?href="../resources/css/ext-all.css"/>??
  5. ????<script?type="text/javascript"?src="../adapter/ext/ext-base.js"</script>??
  6. ????<script?type="text/javascript"?src="../ext-all.js"></script>??
  7. ????<script?type="text/javascript"><!--??
  8. ????????Ext.onReady(function(){??
  9. ????????????var?tree=new?Ext.tree.TreePanel({??
  10. ????????????????el:'tree'??
  11. ????????????});??
  12. ????????????var?root=new?Ext.tree.TreeNode({text:'我是根'});??
  13. ????????????tree.setRootNode(root);??
  14. ????????????tree.render();??????????????
  15. ????????});??????
  16. </script>??
  17. </head>??
  18. <body>??
  19. ?<div?id="tree"></div>??
  20. </body>??
  21. </html>??

?

这里的参数tree表示渲染的DOM的id.HTML中应该要要有<div id="tree"></div>相对应，最后这棵树就出现在这个div的位置上。

在获得了树形面板后，就必须要设置根，因为必须有了根才可以生长枝节，最后生成完整的树，所以根是必须的。具体实现的效果如图1所示。

1

图1 只有根的树

二、为树生枝展叶

上面的实例代码生成一棵没有根的树，下面的代码就为树添加枝和叶，代码清单如下：

?

view plai