在Ext中树是经验用到的，最简单的一棵树如下：
treePanelFirst = new Ext.tree.TreePanel({
// 自动创建树加载器 TreeLoader
dataUrl:'context.jsp',
root: {
nodeType: 'async',
text: 'Ext JS'
}
});
只要dataUrl正确的返回符合javascript数组类型的json就可以自动解读成树。
下面的代码和上面实现的功能一致
treePanelFirst = new Ext.tree.TreePanel({
// 树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。
// 返回值必须是以树格式的javascript数组。
loader: new Ext.tree.TreeLoader(
{
dataUrl: 'context.jsp'
}),
// 树的根节点对象 ,采用异步的方式，用于动态加载子节点
root:new Ext.tree.AsyncTreeNode({
text:'Ext JS'
})
});
还有一种方法一样可以创建一棵树，效果和上面的一样：
ApiPanel = function() {
ApiPanel.superclass.constructor.call(this, {
// 树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。
// 返回值必须是以树格式的javascript数组。
loader: new Ext.tree.TreeLoader(
{
dataUrl: 'context.jsp'//左侧目录数据源
}),
// 采用异步的方式，用于动态加载子节点
root: new Ext.tree.AsyncTreeNode(
{
// 只读属性，该节点所显示的文本.
text:'Ext JS',
})
});
};
Ext.extend(ApiPanel, Ext.tree.TreePanel, {
});
treePanelFirst = new ApiPanel();
最后在html文件中进行测试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../Tree/TreePanelTest.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
treePanelFirst.render("header");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
上面三种方法效果是一样的，当然在创建树的时候还有很多属性可以指定常用的如下：
// True表示为显式建立头部元素，false则是跳过创建。
// 缺省下，如不创建头部，将使用title的内容设置到头部去，
// 如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。
header: true,
width: 248,
minSize: 175,
maxSize: 500,
// True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 0 0 0',
// 是否隐藏根节点,ture就不隐藏根节点，false不显示根节点
rootVisible:false,
// true 表示在面板上设置 overflow:auto和出现滚动条
// false 表示裁剪所有溢出的部分，不设置默认为false
autoScroll:true,
animCollapse:false,
// 是否以动画形式展开.会慢慢展开
animate: true,
// 是否显示节点左侧的小三角形头的图标
useArrows:false,
// 是否显示区分结构的虚线,useArrows:false情况下才有效果
line:true,
// 是否允许拖放，true可以拖放
enableDD:true,
collapseMode:'mini',
// True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方
collapseFirst:false,
现在来看看后台要传递过来的数据：
String jsonData = "[{text:'测试1',leaf: true ,msg:'moreMessage1'}, " +
"{text:'测试2',leaf: true ,msg:'moreMessage2'}, " +
"{text:'测试3',leaf: true ,msg:'moreMessage3'}]";
System.out.print(jsonData);
out.write(jsonData);
其实后台就是传递过来json数组,可以由各种方法来实现。结果如下：
如果要实现多层结构的树则可以返回下面类似的json数据：
String jsonData = "[{" +
"text:'测试1',msg:'moreMessage1',leaf: false," +
"children:[ " +
"{text:'测试1-1',msg:'moreMessage1-1',leaf:true}," +
"{text:'测试1-2',msg:'moreMessage1-2',leaf:true}," +
"{text:'测试1-3',msg:'moreMessage1-3',leaf:true}" +
"]" +
"}," +
"{text:'测试2',msg:'moreMessage2',leaf:true}, " +
"{text:'测试3',msg:'moreMessage3',leaf:true} " +
"]";
结果如下：
本人新手，刚刚开始学习Ext，有错请指出，谢谢