EXT的TREE树

Oo低調dё天才oO · 发表于 2013-2-7 19:43:16

老实说，我第一个学EXT的原因是因为树，它简约而不简单的效果好看多了！但学着学着，我发现自己不只是想学树,而是ext的全部.以下是树的代码.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>hello worldi演示</title> <script src="../adapter/ext/ext-base.js"></script><script src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /></head><body><script>Ext.onReady(function(){var tree=new Ext.tree.TreePanel({//创建树形面板el:'tree',//绑定的控件enableDD:true,//是否允许拖入autoScroll:true,//true表示为在面板body元素上，设置overflow:'auto'和出现滚动条，false 为裁剪所有溢出内容，默认为falseanimate:true,//是否以动画形式展开／闭合useArrows:true,//是否显示节点左侧的小三角形图标line:false//只有userArrows为false时才起作用，表示是否显示区分结构的虚线});var root=new Ext.tree.TreeNode({//创建结点text:'根结点'});var node1=new Ext.tree.TreeNode({text:'结点1',listeners:{'click':function(){alert('单击事件')}}});var node2=new Ext.tree.TreeNode({text:'结点2'});var node3=new Ext.tree.TreeNode({text:'结点3'});var node4=new Ext.tree.TreeNode({text:'结点4'});var node5=new Ext.tree.TreeNode({text:'结点5'});root.appendChild(node1);//追加子结点root.appendChild(node2);node2.appendChild(node3);root.appendChild(node4);root.appendChild(node5);tree.setRootNode(root);//设置根结点tree.render();//构建整颗树});</script><div id="tree" style="height:300px;"></div></body></html>

		自动登录	找回密码
密码			立即注册