刚刚在接触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. 根据HttpServletRequest获取用户真实IP地址
			
    原因: 当我们通过request获取客户端IP时,自身服务器通常会为了保护信息或者负载均衡的目的,对自身服务器做反向代理.此时如果我们通过request.getRemoteAddr();可能获取到的是 ...
    
			
    2. 
						
  2. JS控制台打印星星，总有你要的那一款~
			
    用JS语句,在控制台中打印星星,你要的是哪一款呢~来认领吧~ 1.左直角星星 效果: 代码: let readline=require("readline-sync"); cons ...
    
			
    3. 
						
  3. JDK8-废弃永久代（PermGen）迎来元空间（Metaspace）
			
    1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4.总结 ========正文分割线===== 一.背景 1.1 永久代(PermGen)在哪里? 根据,h ...
    
			
    4. 
						
  4. 常用Linux命令、包括vi 、svn
			
    /etc/init.d/network restart//===========================================更新脚本cd /www/scripts更新站点./sta ...
    
			
    5. 
						
  5. Apache Spark 2.2.0 中文文档 - SparkR (R on Spark) | ApacheCN
			
    SparkR (R on Spark) 概述 SparkDataFrame 启动: SparkSession 从 RStudio 来启动 创建 SparkDataFrames 从本地的 data fr ...
    
			
    6. 
						
  6. IDEA用maven创建springMVC项目和配置
			
    工具准备:IDEA2016.3 Java jdk 1.8 1.DEA创建项目 新建一个maven project,并且选择webapp原型.  然后点击next  这里的GroupId和Artifac ...
    
			
    7. 
						
  7. mysql操作sql的小技巧
			
    本篇集中整理一下执行sql的小技巧,这种方式不仅带来了操作上的便捷,也可以保证数据可以数据的安全性. 1:查询数据(保证查询性能) 首先想先解释一下 SELECT * 和 SELECT t.id ,  ...
    
			
    8. 
						
  8. hdu4704  Sum  2013 Multi-University Training Contest 10  数论题
			
    Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Subm ...
    
			
    9. 
						
  9. 在Ubuntu终端彻底删除软件
			
    在Ubuntu终端彻底删除软件 1.删除软件 方法一.如果你知道要删除软件的具体名称,可以使用 sudo apt-get remove --purge 软件名称 sudo apt-get autore ...
    
			
    10. 
						
  10. 简单说明如何设置系统中的NLS_LANG环境变量
			
    概述:本地化是系统或软件运行的语言和文化环境.设置NLS_LANG环境参数是规定Oracle数据库软件本地化行为最简单的方式.NLS_LANG参数不但指定了客户端应用程序和Oracle数据库所使用的语 ...
    
			
    11.