`

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布局设置的时候,已经上传上去了,如果使用的话,可以去看看

 

出来的效果



 

  • 大小: 4.6 KB
分享到:
评论

相关推荐

    白色简洁的艺术展示网页模板下载.zip

    白色简洁的艺术展示网页模板下载.zip

    电商平台开发需求文档.doc

    电商平台开发需求文档.doc

    STM32F030单片机控制LED灯.zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用KEIL 标准库开发,当前在STM32F030C8T6运行,如果是STM32F030其他型号芯片,依然适用,请自行更改KEIL芯片型号以及FLASH容量即可。 3、软件下载时,请注意keil选择项是jlink还是stlink。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、编译时请注意提示,请选择合适的编译器版本。

    数电期末练习题.doc

    数电期末练习题.doc

    交易流水证明_用于材料证明_20241225_174557.zip

    交易流水证明_用于材料证明_20241225_174557.zip

    计算机网络期末复习(第八版)谢希仁

    计算机网络期末复习(第八版)谢希仁

    基于微信小程序的汽车销售系统的设计与实现springboot.zip

    汽车销售系统使用Java语言进行编码,使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务,其管理汽车销售系统信息,查看汽车销售系统信息,管理汽车销售系统。 用户信息管理页面,此页面提供给管理员的功能有:用户信息的查询管理,可以删除用户信息、修改用户信息、新增用户信息,还进行了对用户名称的模糊查询的条件。 汽车信息管理页面,此页面提供给管理员的功能有:查看已发布的汽车信息数据,修改汽车信息,汽车信息作废,即可删除,还进行了对汽车信息名称的模糊查询 汽车信息信息的类型查询等等一些条件。 汽车类型管理页面,此页面提供给管理员的功能有:根据汽车类型进行条件查询,还可以对汽车类型进行新增、修改、查询操作等等。

    VB+ACCESS网络计时管理系统设计(源代码+系统)(2024gv).7z

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于计算机科学与技术等相关专业,更为适合;

    电视盒子的远程输入法应用,可跨屏远程输入和跨屏远程控制盒子.7z

    电视盒子的远程输入法应用,可跨屏远程输入和跨屏远程控制盒子.7z

    白色大气的旅游度假酒店企业网站模板下载.zip

    白色大气的旅游度假酒店企业网站模板下载.zip

    【信息融合】基于matlab多维卡尔曼滤波器传感器信息融合(含GPS)【含Matlab源码 9980期】含报告.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    (177453248)用python代 码放烟花.zip

    标题中的“用python代码放烟花”表明我们将讨论如何使用Python编程语言来模拟烟花绽放的效果。在Python编程中,实现这样的视觉效果通常涉及到图形用户界面(GUI)或者更具体地说是图形渲染。描述中的内容与标题一致,暗示我们将深入探讨一个使用Python编写的烟花模拟程序。 `main.py`是这个项目的核心文件,它很可能是整个烟花秀的主入口点。在这个文件中,开发者可能定义了程序的主循环,以及调用其他模块如`particle.py`的代码。`particle.py`可能包含了粒子系统的设计,因为烟花效果通常是通过模拟无数粒子的运动来实现的。粒子系统是一种常见的计算机图形学技术,用于模拟大量独立对象(在这里是烟花)的行为。 在`particle.py`中,我们可以预期找到类或函数来定义烟花粒子的属性,比如位置、速度、颜色、生命周期等。这些粒子可能会随着时间的推移而改变状态,例如从升空到爆炸,再到散开形成绚丽的图案。开发者可能使用了物理学原理,如重力和随机力,来模拟粒子的运动。 `.gitignore`文件是一个配置文件,告诉Git版本控制系统忽略特定的文件或目录。在这个项目中,它可

    白色创意风格的图片浏览源码下载.zip

    白色创意风格的图片浏览源码下载.zip

    白色大气风格的设计公司CSS3单页模板.zip

    白色大气风格的设计公司CSS3单页模板.zip

    Chapter 03 复合数据类型-1(资源)

    Chapter 03 复合数据类型-1(资源)项目中编写代码部分的源代码示例,包括石头剪刀布程序和用户登录以及增删改查程序

    白色大气风格的电子邮件订阅模板下载.zip

    白色大气风格的电子邮件订阅模板下载.zip

    IMG_20241225_230314.jpg

    IMG_20241225_230314.jpg

    白色简洁风格的安卓游戏卡通动漫人物整站网站模板.zip

    白色简洁风格的安卓游戏卡通动漫人物整站网站模板.zip

    (180204840)变电站红外电压电流互感器绝缘子检测图像数据集

    变电站红外电压电流互感器绝缘子检测图像数据集,数据集总共1600张左右图片,标注为VOC格式图像数据集,数据集总共1600张左右图片,标注为VOC格式。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

Global site tag (gtag.js) - Google Analytics