刚刚在接触extjs这个前段插件，由于公司是用这个来做前段的，所以有必要花点时间来掌握一下，下面是我自己的非常浅的学习总结，后期会慢慢添加的！！

一、TreePanel基本配置参数:

　　animate:true//展开,收缩动画,false时,则没有动画效果

　　autoHeight:true//自动高度,默认为false

　　enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable

　　enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)

　　enableDrop:true//仅仅drop

　　lines:true//节点间的虚线条

　　loader:Ext.tree.TreeLoader//加载节点数据

　　root:Ext.tree.TreeNode//根节点

　　rootVisible:false//false不显示根节点,默认为true

　　trackMouseOver:false//false则mouseover无效果

　　useArrows:true//小箭头

二、TreeNode的基本配置参数:

　　checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框

　　expanded:fasle//展开,默认不展开

　　href:"http:/www.cnblogs.com"//节点的链接地址

　　hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

　　leaf:true//叶子节点,看情况设置

　　qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下

　　text:"节点文本"//节点文本

　　singleClickExpand:true//用单击文本展开,默认为双击

三、treepanel小例子

1、静态页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'main.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" media="all"href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext-base.js"></script>

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript" language="javascript">

Ext.onReady(function(){

	   var mytree=new Ext.tree.TreePanel({

	       el:"container",//应用到的html元素id

	       animate:true,//以动画形式伸展,收缩子节点

	       title:"Extjs静态树",

	       collapsible:true,

	       rootVisible:true,//是否显示根节点

	       autoScroll:true,

	       //autoHeight:true,

	       width:150,

	       height : 300,

	       lines:true,//节点之间连接的横竖线

	       loader:new Ext.tree.TreeLoader(),//

	       root:new Ext.tree.AsyncTreeNode({

	           id:"root",

	           text:"根节点",//节点名称

	           expanded:true,//展开

	           leaf:false,//是否为叶子节点

	           children:[{

	        	   text:'子节点一',

	        	   leaf:true

	        	   },

	        	   {

	        		   id:'child2',

	        		   text:'子节点二',

	        		   children:[{

	        			   text:"111",

	        			   id : 'cccc',

	        			   leaf:true

	        			   }

	        		   ]

	        	   }

	           ]

	       })

	   });

	   mytree.render();//不要忘记render()下,不然不显示哦

	});

</script>

</head>

<body>

	<div id="container"></div>//这个要与el里面的对应

</body>

</html>

结果显示　　

第二种静态方法

Ext.onReady(function(){

   Ext.QuickTips.init();

   var mytree=new Ext.tree.TreePanel({

       el:"container",

       animate:true,

       title:"Extjs静态树",

       collapsible:true,

       enableDD:true,

       enableDrag:true,

       rootVisible:true,

       autoScroll:true,

       autoHeight:true,

       width:150,

       lines:true

   });

   //根节点

   var root=new Ext.tree.TreeNode({

       id:"root",

       text:"控制面板",

       expanded:true

   });

   //第一个子节点及其子节点

   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:"mainFrame",

       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();//不要忘记render()下,不然不显示哦

});

结果　　

2.动态显示

对于我们来说最重要也就是动态插入了吧。至于前台这边大家都是差不多，后台代码我这里是用java,通过json来接收数据的！只需要把json数据同treepanel属性一一对应就可以了。

Ext.onReady(function(){

   Ext.QuickTips.init();

   var mytree=new Ext.tree.TreePanel({

       el:"container",

       animate:true,

       title:"简单Extjs动态树",

       collapsible:true,

       enableDD:true,

       enableDrag:true,

       rootVisible:true,

       autoScroll:true,

       //autoHeight:true,

       width:150,

       height : 500,

       lines:true,

       //这里简简单单的loader的几行代码是取数据的,很经典哦

       loader:new Ext.tree.TreeLoader({

          dataUrl:"treeAction!syncMenu?date="+new Date()+""

       })

   });

　　

后期有新的进展，我会继续添加到此博客的！！！！

												


											
[extjs(2)] extjs第一个组件treepanel的更多相关文章
	

    
								
  1. Angular的第一个组件
		
    创建组件 在vscode的命令窗口输入: ng generate component login --inline-template --inline-style 或者简写 ng g c login  ...
    
		
    2. 
						
  2. 【转载】COM 组件设计与应用（六）——用 ATL 写第一个组件
		
    原文:http://vckbase.com/index.php/wv/1216.html 一.前言 1.与 <COM 组件设计与应用(五)>的内容基本一致.但本回讲解的是在 vc.net  ...
    
		
    3. 
						
  3. 【转载】COM 组件设计与应用（五）——用 ATL 写第一个组件
		
    原文:http://vckbase.com/index.php/wv/1215.html 一.前言 1.如果你在使用 vc5.0 及以前的版本,请你升级为 vc6.0 或 vc.net 2003: 2 ...
    
		
    4. 
						
  4. Extjs Hello extjs
		
    <html > <head runat="server"> <title></title> <link rel="s ...
    
		
    5. 
						
  5. react实战系列 —— react 的第一个组件
		
    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...
    
		
    6. 
						
  6. ExtJS 4.2 第一个程序
		
    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
    
		
    7. 
						
  7. 【ExtJS】各种获取元素组件方法
		
    1.get().getDom().getCmp().getBody().getDoc(): get(id/obj): get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象, Ex ...
    
		
    8. 
						
  8. ExtJs学习笔记之ComboBox组件
		
    ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...
    
		
    9. 
						
  9. ExtJs学习笔记之Button组件
		
    按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 201521123051《Java程序设计》第十三周学习总结
			
    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
    
			
    2. 
						
  2. 工作总结--如何定位web系统前后台的bug，以及bug分析/测试感想
			
    对于web项目前台和后台bug定位分析:一. 系统整体了解 懒企鹅营销服务平台用的架构:web前端: Bootstrap 3.0 组件丰富,兼容性好,界面美观 Server端: jsp+Servlet ...
    
			
    3. 
						
  3. Ansible系列(六)：循环和条件判断
			
    本文目录:1. 循环 1.1 with_items迭代列表 1.2 with_dict迭代字典项 1.3 with_fileglob迭代文件 1.4 with_lines迭代行 1.5 with_ne ...
    
			
    4. 
						
  4. 匹配替换第n个字符串
			
    var name = "questions[0][question]",i=0; name.replace(/\[.+?\]/g, function(match, pos, ori ...
    
			
    5. 
						
  5. return及break区别
			
    一.break 语句 中止当前循环,switch 语句或 label 语句,并把程序控制流转到紧接着被中止语句后面的语句. 示例 下面的函数里有个 break 语句,当 i 为 3 时,会中止 whi ...
    
			
    6. 
						
  6. BZOJ-1050-[HAOI2006]旅行comf（并查集）
			
    Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最 ...
    
			
    7. 
						
  7. [mysql]  ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES).
			
    用mysql -u root -p显示ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YE ...
    
			
    8. 
						
  8. HTML 简述
			
    1.本页超链接 <a href="#t">查看 Chapter 4.</a> <a name="t">Test</a& ...
    
			
    9. 
						
  9. 初学node.js有感三
			
    WebStorm下的node.js 一.回顾与继续       在前面,我们知道了node.js的基本框架和思路,在这些原生环境下我们对node.js的设计思想有了比较深刻的认识,并且具有了编写大型程 ...
    
			
    10. 
						
  10. 【BZOJ】1015 [JSOI2008]星球大战starwar（并查集+离线处理）
			
    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...
    
			
    11.