刚刚在接触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课程设计——猜数游戏个人博客
			
    1.团队课程设计链接 团队博客:http://www.cnblogs.com/springbreezemiles/p/7064135.html 2.个人负责模块 猜数部分的算法及代码实现. 3.自己的 ...
    
			
    2. 
						
  2. python基础之字典、赋值补充
			
    字典常用操作: 存/取info_dic={'name':'egon','age':18,'sex':'male'} print(info_dic['name11111111']) print(info ...
    
			
    3. 
						
  3. POJ-3045 Cow Acrobats (C++ 贪心）
			
    Description Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away a ...
    
			
    4. 
						
  4. SimpleRpc-序列化与反序列化的设计与实现
			
    为什么需要序列化和反序列化? 假设你是客户端,现在要调用远程的加法计算服务,你与服务端商定好了发送数据的格式:发送8个字节的请求,前4字节是第一个数,后4字节是第二个数,服务端读取数据的时候也按照商定 ...
    
			
    5. 
						
  5. Day-1：初识开发板与基础知识
			
    买的这款51,ARM,AVR三合一的单片机,也不知道后面具体使用会不会有问题,先玩玩看吧. ------------------------------------------------------ ...
    
			
    6. 
						
  6. 关于IOS的屏幕适配（iPhone）——资源适配
			
    IOS的屏幕适配几乎不需要大量的代码操作,更多的时间我们只是动动鼠标选择一下就搞定.可以苹果在这方面做的还是比较人性的,解放了开发者. 首先来说说Iphone这几种屏(由于最近做的是iPhone AP ...
    
			
    7. 
						
  7. BigDecimal的加减乘除及比较大小
			
    import java.math.BigDecimal; import static java.lang.System.out; public class BaseClass { public sta ...
    
			
    8. 
						
  8. 解决linux下部署科大讯飞时的版本过低问题
			
    在将项目部     署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下   在Windo ...
    
			
    9. 
						
  9. PLT文件 和  DXF文件
			
    PLT: CAM/CAD类似软件处理的图像文件的文件格式 DXF: AutoCAD(Drawing Interchange Format或者Drawing Exchange Format) 绘图交换文 ...
    
			
    10. 
						
  10. EOutOfResources     EConvertError     is not a valid integer value   Unable to insert a line
			
    is not a valid integer value???project Teclaser_Single.exe raised exception class EOutOfResources wi ...
    
			
    11.