刚刚在接触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. Java课程设计  学生基本信息管理系统    团队博客
			
    学生基本信息管理系统团队博客 项目git地址 https://git.oschina.net/Java_goddess/kechengsheji 项目git提交记录截图 项目功能架构图与主要功能流程图 ...
    
			
    2. 
						
  2. apache: apache-tomcat-6.0.35完整下载
			
    Index of /dist/tomcat/tomcat-6/v6.0.35/bin Name Last modified Size Description Parent Directory - ex ...
    
			
    3. 
						
  3. [09] 监听器 Listener
			
    1.事件 1.1 事件的概念 在Servlet中有一个概念叫做监听,顾名思义,就是监听某种事件是否发生.就如你是一家娱乐媒体公司的老板,你派出狗仔队去跟着某些明星,比如你想了解他们的绯闻,或者活动进展 ...
    
			
    4. 
						
  4. “AOP代理”遇到“双上下文”
			
    最近有小伙伴儿遇到了一个问题来咨询我,问题大致如下: 他在Service层利用Aspect设置了一个Spring AOP代理,在单元测试以及在service层代码上添加代理的时候均没有发现问题,但是在 ...
    
			
    5. 
						
  5. Java 简单实用方法二
			
    整理以前的笔记,在学习Java时候,经常会用到一些方法.虽然简单但是经常使用.因此做成笔记,方便以后查阅 这篇博文先说明构造和使用这些方法. 1,判断String类型数据是否包含中文 可以通过正则表达 ...
    
			
    6. 
						
  6. 极化码之tal-vardy算法（2）
			
    上一节我们了解了tal-vardy算法的大致原理,对所要研究的二元输入无记忆对称信道进行了介绍,并着重介绍了能够避免输出爆炸灾难的合并操作,这一节我们来关注信道弱化与强化操作. [1]<Chan ...
    
			
    7. 
						
  7. java 对象的序列化与反序列化
			
    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...
    
			
    8. 
						
  8. 分布式系统中生成全局ID的总结与思考
			
    世间万物,都有自己唯一的标识,比如人,每个人都有自己的指纹(白夜追凶给我科普的,同卵双胞胎DNA一样,但指纹不一样).又如中国人,每个中国人有自己的身份证.对于计算机,很多时候,也需要为每一份数据生成 ...
    
			
    9. 
						
  9. 糖果大战   hdu1204
			
    糖果大战 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
    
			
    10. 
						
  10. Centos7 创建本地 docker 仓库极其遇到的问题
			
    环境安装: VirtualBox 安装 Centos7 安装 docker 1. 配置私有仓库和客户端地址 私有仓库:192.168.1.104 客户端:192.168.1.103 通过 Centos ...
    
			
    11.