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元素的idanimate : true,//以动画形式伸展,收缩子节点title : "Extjs静态树",//标题collapsible : true,//可折叠enableDD : true,//不仅可以拖动,还可以通过拖动改变节点的层次结构enableDrag : true,//效果上面的拖动,实际没有变化rootVisible : true,//显示根节点autoScroll : true,//内容溢出时产生滚动条,默认为falseautoHeight : true,//自动高度,默认为falsewidth : 200,//宽度lines : true,//节点间的虚线条useArrows : false//是否在树中使用Vista样式箭头,默认为false});//根节点var root = new Ext.tree.TreeNode({id : "root",//节点idtext : "控制面板",//节点上的文本信息expanded : true,//是否展开节点,默认为falseqtip:"控制面板",//节点上的提示信息//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" alt="TreePanel学习-TreeNode">
?