<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>tree</title>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//树控件由Ext.tree.TreePanel类定义，控件名称为TreePanel，TreePanel类继承自Panel面板
var tree = new Ext.tree.TreePanel({
el:'tree'//这里的参数‘tree’表示渲染的DOM的id
});
var root = new Ext.tree.TreeNode({text:'我是根'});
//用setRootNode()方法把root放到tree里
tree.setRootNode(root);
//对tree进行渲染
tree.render();
});
</script>
</head>
<body>
<script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
<!-- 这里定义渲染的DIV，树将出现在这人DIV里 -->
<div id="tree" style="height:300px;"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>tree</title>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
el:'tree'
});
var root = new Ext.tree.TreeNode({text:'我是根'});
var node1 = new Ext.tree.TreeNode({text:'我是根的第一个枝子'});
var node2 = new Ext.tree.TreeNode({text:'我是根的第一个枝子的第一个叶子'});
var node3 = new Ext.tree.TreeNode({text:'我是根的第一个叶子'});
//使用appendChild()为一人结点添加子结点
node1.appendChild(node2);
root.appendChild(node1);
root.appendChild(node3);
tree.setRootNode(root);
tree.render();
//没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。
//root.expand(true, true);第一个参数表示是否递归展开所有子结点，如果为false，就只展开第一级子结点，下面的结点仍然是折叠状态。第二个参数表示是否要动画效果，如果为true可以明显看出这些结点是逐渐展开的。
root.expand(true, true);
});
</script>
</head>
<body>
<script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
<div id="tree" style="height:300px;"></div>
</body>
</html>
