Extjs树的各种玩法案例
本案例中记载了Extjs中一棵树的形成以及各种案例集成，并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的，整理出来，方便以后查看。
JSP页面：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>区域管理</title>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>
<script type="text/javascript">
//项目根目录地址
var ctxStatic = '${ctxStatic}';
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
js页面：
Ext.onReady(function() {
// 初始化节点提示qtip
Ext.QuickTips.init();
// 定义一个根节点
var root = new Ext.tree.TreeNode({
id : 'root',
text : '树根',
checked : true,
qtip : '我是树根'
});
// 定义一个树叶或者枝
var leaf1 = new Ext.tree.TreeNode({
id : "leaf1",
text : '我是树叶1',
checked : true,
qtip : '我是树叶'
});
var leaf2 = new Ext.tree.TreeNode({
id : "leaf2",
text : '我是树枝2',
checked : true,
qtip : '我是树枝'
});
var leaf3 = new Ext.tree.TreeNode({
id : "leaf3",
text : '我是树叶3',
href : 'http://www.baidu.com',
checked : true,
qtip : '我是树叶'
});
var leaf4 = new Ext.tree.TreeNode({
id : "leaf4",
text : '我是树枝4',
checked : true,
qtip : '我是树枝'
});
var leaf5 = new Ext.tree.TreeNode({
id : "leaf5",
text : '我是树叶5',
checked : true,
qtip : '我是树叶'
});
var leaf6 = new Ext.tree.TreeNode({
id : "leaf6",
text : '我是树叶4',
checked : true,
qtip : '我是树叶'
});
root.appendChild(leaf1);
root.appendChild(leaf2);
leaf2.appendChild(leaf3);
leaf2.appendChild(leaf4);
leaf4.appendChild(leaf5);
leaf4.appendChild(leaf6);
// 定义一个菜单
// var contextMenu = new Ext.menu.Menu({ items : [(
// ),( )] }); contextMenu.showAt(event.getXY());
// tree.on('contextmenu',treeContextHandler);
//
//
// var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',
// children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{
// text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();
// 定义一棵树
var tree = new Ext.tree.TreePanel({
renderTo : 'container',
// loader : loader,
root : root,
title : '我是一颗小小树',// 树标题
collapsible : true,// 树形是否有缩放功能
autoHeight : true,// 自动高度，默认false
animate : true,// 展开动画
enableDrag : true,// 是否可以拖动(效果上)
enableDD : true,// 不进可以拖动，还可以改变节点层次结构
enableDrop : false,// 仅仅drop
lines : true,// 节点间的虚线条是否显示
rootVisible : true,// 是否显示根节点，默认true
userArrows : true,// 是否显示小箭头
// autoScroll : true,//是否显示滚动条
// height : 150,
width : 200
});
// 第一个参数为true，展开所有节点，false只展开一级。第二个参数为true，慢慢展开，显示展开，false，则不显示过程
root.expand(false, true);
// 编写树节点的单击事件
tree.on('click', function(node, event) {
// Ext.Msg.alert("信息提示","you clicked me！");
Ext.Msg.show({
title : '信息提示',
msg : node.text,
animEl : node.ui.textNode
});
// 为节点修改样式
var ui = node.ui;
ui.hide();
(function() {
ui.show();
}).defer(2000);
// ui.addClass("big");
// (
// function(){
// ui.removeClass("big");
// }
// ).defer(5000);
// 删除选中的节点
// tree.getSelectionModel().getSelectedNode().remove();
});
// 编写树节点的双击事件
tree.on('dblclick', function(node, event) {
Ext.Msg.alert("信息提示", "you clicked me twice！");
});
// 编辑树节点的拖放事件
tree.on('nodedrop', function(event) {
Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
+ event.target.text + '上，掉落的方式是' + event.point);
switch (event.point) {
case 'append':
Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'
+ event.target.text + '子节点');
break;
case 'above':
Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
+ event.target.text + '和'
+ event.target.previousSibling.text + '之间');
break;
case 'below':
Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
+ event.dropNode.previousSibling.text + '和'
+ event.target.nextSibling.text + '之间');
break;
}
})
// 对树节点进行排序的工具
// new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});
// //编写树节点的双击事件 tree.on('expandnode',function(node,event){
// Ext.Msg.alert("信息提示","expandnode！"); }); //编写树节点的双击事件
// tree.on('collapsenode',function(node,event){
// Ext.Msg.alert("信息提示","collapsenode！"); });
var root2 = new Ext.tree.TreeNode({
id : 'root2',
text : '树根2',
qtip : '我是树根2'
});
var tree2 = new Ext.tree.TreePanel({
renderTo : 'container',
root : root2,
enableDrop : true,
// enableDrag:true,
title : '我是一颗小小草',
collapsible : true,
width : 200
});
root2.expand();
});
一、Ext.tree.TreePanel
主要配置项：
root：树的根节点。
rootVisible：是否显示根节点，默认为true。
useArrows：是否在树中使用Vista样式箭头，默认为false。
lines：是否显示树线，默认为true。
loader：树节点的加载器，默认为Ext.tree.TreeLoader。
selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。
pathSeparator：树节点路径的分隔符，默认为“/”。
singleExpand：是否一次只展开树中的一个节点，默认为true。
requestMethod：请求方法，可选值有POST、GET。
containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。
主要方法：
collapseAll()：收缩所有树节点
expandAll()：展开所有树节点
getRootNode()：获取根节点
getNodeById(String id)：获取指定id的节点
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见
expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路径
getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表，或者被选中节点的某个指定的属性数组
selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点
getSelectionModel()：返回此TreePanel使用的选择模型
二、Ext.tree.TreeNode
主要配置项：
text：节点上的文本信息
qtip：节点上的提示信息
icon：节点图标对应的路径
iconCls：应用到节点图标上的样式
checked：当前节点的选择状态
true：在节点前显示一个选中状态的复选框
false：在节点前显示一个未选中状态的复选框
不指定该值：不显示任何复选框
href：节点的连接属性，默认为#
hrefTarget：显示节点连接的目标框架
editable：是否允许编辑，默认为true
expanded：是否展开节点，默认为false
disabled：是否禁用节点，默认为false
singleClickExpand：是否通过单击方式展开节点
allowChildren：是否允许当前节点具有子节点，默认为true
expandable：当不含子节点时，是否总显示一个加减图标，默认为false
uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI
主要属性：
text：节点上的文本信息
disabled：当前节点是否被禁用
主要方法：
collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点
deep：是否级联收缩全部子节点
collapseChildNodes( [Boolean deep] )：收缩所有子节点
disable()：禁用当前节点
enable()：启用当前节点
ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的
expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点
expandChildNodes( [Boolean deep] )：展开所有子节点
isExpanded()：当前节点是否展开
isSelected()：当前节点是否被选中
select()：选择当前节点
setText( String text )：设置当前的文本
toggle()：切换当前节点的展开和收缩状态
unselect()：取消对当前节点的选择
getUI()：取得节点的UI对象
三、Ext.tree.AsyncTreeNode
主要配置项：
loader：当前节点的树加载器，默认使用树中配置的树加载器
主要方法：
isLoaded()：当前节点是否已经加载数据
reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数
作者：伫望碧落 出处：http://blog.csdn.net/cl05300629