刚刚在接触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. Srping - bean的依赖注入（Dependency injection）
			
    目录 1 概述 2 两种基本的依赖注入方式 2.1 构造函数方式 2.2Setter方式 3 其他依赖注入功能 3.1 <ref/>标签引用不同范围的bean 3.2 内部bean 3.3 ...
    
			
    3. 
						
  3. 解决python第三方插件下载慢的方法
			
    在CMD中输入: pip install 插件名字 --trusted-host pypi.douban.com -i http://pypi.douban.com/simple 就是更换国内源
    
			
    4. 
						
  4. XML功能
			
    REF:https://www.baidu.com/link?url=_-UY8rZVAORlesKTth0F7C8LbvXCL4lSwz6vmQVnTEgmT06NFGdoaD9FbuEQhR7xG ...
    
			
    5. 
						
  5. Spring-mvc配置“/”路径过滤问题
			
    首先大家都知道"/*"可以匹配所有url,包括带扩展名的,一般只用在过滤器上. 一般Spring-mvc的核心 <servlet> <servlet-name&g ...
    
			
    6. 
						
  6. 02_Java运行环境搭建
			
    1.Java运行环境搭建,对于初学者来说,主要下载安装jdk即可,windows操作系统再配合记事本,即可进行java程序开发.后续的学习以及工作中需要使用IDE工具进行开发,常用IDE工具是ecli ...
    
			
    7. 
						
  7. EntityFramework Core饥饿加载忽略导航属性问题
			
    前言 .NET Core项目利用EntityFramework Core作为数据访问层一直在进行中,一直没有过多的去关注背后生成的SQL语句,然后老大捞出日志文件一看,恩,有问题了,所以本文产生了,也 ...
    
			
    8. 
						
  8. 常见sql技巧
			
    一.一些常见的SQL实践 (1)负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不是好 ...
    
			
    9. 
						
  9. JS数字金额转换为货币汉字形式
			
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
    
			
    10. 
						
  10. SiganlR 系列之概述
			
    简介 SignalR 是微软的 http 长连接(以下简称长连接)框架,它的出现为我们提供了一套行之有效的实时通信的解决方案. 背景 在http 1.0 时代,preRequest 都会建立新的tcp ...
    
			
    11.