<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>