TreePanel学习-TreeNode _Web前端

TreePanel学习--TreeNode

主要一个TreePanel静态树的学习，进入公司以后，发现公司在使用ExtJs，而且我以往使用的是Jquery，所以开始学习ExtJs的东西，然后公司安排一些任务给自己做

tree.tml

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>静态树</title>
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<style type="text/css">
.container {
	background: url(delete.gif) no-repeat 1px 2px !important;
}
</style>
<script type="text/javascript">
	Ext.onReady(function() {
		Ext.QuickTips.init();
		var mytree = new Ext.tree.TreePanel({
			el : "container",//应用到的html元素的id
			animate : true,//以动画形式伸展，收缩子节点
			title : "Extjs静态树",//标题
			collapsible : true,//可折叠
			enableDD : true,//不仅可以拖动，还可以通过拖动改变节点的层次结构
			enableDrag : true,//效果上面的拖动，实际没有变化
			rootVisible : true,//显示根节点
			autoScroll : true,//内容溢出时产生滚动条，默认为false
			autoHeight : true,//自动高度，默认为false
			width : 200,//宽度
			lines : true,//节点间的虚线条
			useArrows : false
		//是否在树中使用Vista样式箭头，默认为false
		});

		//根节点
		var root = new Ext.tree.TreeNode({
			id : "root",//节点id
			text : "控制面板",//节点上的文本信息
			expanded : true,
			//是否展开节点，默认为false
			qtip:"控制面板",//节点上的提示信息
				//icon:"delete.gif",//节点图标对应的路径
				iconCls:"container"

		});
		//第一个子节点及其子节点
		var sub1 = new Ext.tree.TreeNode({
			id : "news",
			text : "新闻管理",
			singleClickExpand : true//是否通过单击方式展开节点
		});
		sub1.appendChild(new Ext.tree.TreeNode({
			id : "addNews",
			text : "添加新闻",
			href : "http://www.baidu.com",//节点的连接属性，默认为#
			hrefTarget : "_parent",//显示节点连接的目标框架
			qtip : "打开百度",
			listeners : {//监听
				"click" : function(node, e) {
					alert(node.text)
				}
			}
		}));
		sub1.appendChild(new Ext.tree.TreeNode({
			id : "editNews",
			text : "编辑新闻"
		}));
		sub1.appendChild(new Ext.tree.TreeNode({
			id : "delNews",
			text : "删除新闻"
		}));

		root.appendChild(sub1);
		root.appendChild(new Ext.tree.TreeNode({
			id : "sys",
			text : "系统设置",
		}));
		mytree.setRootNode(root);//设置根节点
		//渲染树形,用于树形的显示，没有它就不会有显示
		mytree.render();
	})
</script>
</head>
<body style="margin: 10px;">
	<div id="container" class="container"></div>
</body>
</html>

所使用的加包，在accordion布局设置的时候，已经上传上去了，如果使用的话，可以去看看

出来的效果