Extjs tree的相关组件及属性

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] )
expandPath( String path, [String attr], [Function callback] )
getChecked( [String attribute], [TreeNode startNode] )
selectPath( String path, [String attr], [Function callback] )
getSelectionModel():

Ext.data.Node
主要配置项:
id:节点id
leaf:当前节点是否为叶子节点
主要属性:
id:节点id
attributes:节点属性的集合
parentNode:当前节点的父节点
childNodes:当前节点所有子节点组成的数组
firstChild:当前节点的第一个直接子节点,如果没有则为null值
lastChild:当前节点的最后一个直接子节点,如果没有则为null值
nextSibling:当前节点的下一个兄弟节点,如果没有则为null值
previousSibling:当前节点的前一个兄弟节点,如果没有则为null值

主要方法:
appendChild( Node/Array node ):追加新的子节点
bubble( Function fn, [Object scope], [Array args] ):从当前节点开始向上迭代调用指定函数,如果指定函数返回false则将终止迭代。
args:传入函数中的参数,默认为当前节点
cascade( Function fn, [Object scope], [Array args] ):从当前节点开始向下迭代调用指定函数,如果指定函数返回false则将终止迭代。
contains( Node node ):当前节点是否包含指定子节点。
eachChild( Function fn, [Object scope], [Array args] ):迭代当前节点的所有子节点调用指定函数,如果指定函数返回false则将终止迭代。
findChild( String attribute, Mixed value ):查找具有指定属性的第一个子节点。
findChildBy( Function fn, [Object scope] ):根据自定义函数查找第一个符合要求的子节点,如果自定义函数返回true则说明匹配成功。
getDepth():取得当前节点的深度,根节点的深度为0
getOwnerTree():取得当前节点所在树。
getPath( [String attr] ):取得当前节点对应的路径,这个路径在程序中可用于展开或者选择节点。
attr:用于查找路径的属性,默认为节点id
hasChildNodes():是否有子节点
indexOf( Node node ):取得指定子节点的索引值,未找到返回-1。
insertBefore( Node node, Node refNode ):在当前节点的指定子节点之前插入一个新的子节点。
node:要插入的新节点

isAncestor( Node node ):判断指定节点是否为当前节点的父节点(可以是任何一级中的父节点)。
isFirst():是否为父节点的第一个子节点。
isLast():是否为父节点的最后一个子节点。
isLeaf():是否为叶子节点。
item( Number index ):取得指定索引的子节点。
remove():从父节点中删除当前节点。
removeChild( Node node ):删除当前节点的指定子节点。
replaceChild( Node newChild, Node oldChild ):用新的子节点替换当前节点的指定子节点。
sort( Function fn, [Object scope] ):用指定的排序函数为当前节点的子节点进行排序。

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] ):重新加载节点数据,并调用回调函数

Ext.tree.TreeNodeUI
主要方法:
getAnchor():从节点的UI中获取焦点的元素
getIconEl():获取图标的元素
getTextEl():获取文本节点
addClass( String/Array className ):
removeClass( String/Array className ):
hide():
show():
isChecked():取得节点的选择状态,如果当前节点没有复选框则函数返回false
toggleCheck( Boolean (optional) ):设置节点复选框的选择状态


Ext.tree.DefaultSelectionModel
是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。

主要方法:
clearSelections():清除对树中所有节点的选择
getSelectedNode():取得当前被选中的节点
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态
selectNext():选择当前被选节点的下一个节点
selectPrevious():选择当前被选节点的上一个节点

Ext.tree.MultiSelectionModel
是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。

主要方法:
clearSelections():清除所有节点的选中状态
getSelectedNodes():取得被选节点组成的数组
isSelected( TreeNode node ):节点是否被选中
select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
unselect( TreeNode node ):取消指定节点的选中状态


Ext.tree.TreeLoader
提供了对子节点的延时加载功能,请求指定的URL地址,返回子节点数据,返回的数据格式如下:


[ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text: "node2", children: [ { id: 3, text: "node3", leaf: true } ] } ]
[ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text: "node2", children: [ { id: 3, text: "node3", leaf: true } ] }]
树节点展开时,当前节点的id会作为请求参数被发送到服务器,在服务器可以通过node参数名进行获取。

 

主要配置项:
dataUrl:获取子节点的URL地址。
baseAttrs:子节点的基本属性对象,该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
baseParams:基本的请求参数,这些参数会被附加到每一个节点的请求中。
clearOnLoad:在加载前是否移除已存在的子节点,默认为true。
preloadChildren:在第一次加载子节点后是否递归加载所有子节点。
requestMethod:请求方法,可选值有POST、GET。
uiProviders:加载器创建子节点的UI实现类。
url:与dataUrl作用相同。

 

主要方法:
load( Ext.tree.TreeNode node, Function callback, (Object) scope ):从指定的URL加载树节点。
node:需要加载子节点的树节点。


Ext.tree.TreeEditor
主要配置项:
alignment:对齐方式。
editDelay:两次点击节点触发编辑操作的延时时间,默认为350毫秒。
hideEl:在显示编辑器组件时是否隐藏绑定元素。
maxWidth:编辑器的最大宽度,默认为250。


Ext.tree.TreeSorter
主要配置项:
property:用于排序的节点属性名,默认为text。
dir:排序方向,可选值有asc、desc,默认为asc。
caseSensitive:是否区分大小写,默认为false。
folderSort:叶节点是否排在非叶节点之下,默认为false。
leafAttr:叶子节点在folder排序时的值,默认为leaf。
sortType:一个自定义函数用于在排序前转换节点值。
本文来源于漱风斋 http://0e2.net/ , 原文地址:http://0e2.net/post/1461.html


 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是复选框的且带右键菜单的树代码。 HTML code Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.onReady(function(){ /************************** 联系人树形菜单**************************/ var contacterTree = new Ext.tree.TreePanel({ id:"treePanelContact", border:false, lines:false, // 去掉树的线 rootVisible:true, autoScroll:true, animate:true, width:200, height : 468, style:"background-color:#FFFFFF;border-color:#0099FF;", // enableDD: false, // 允许树可以拖拽 containerScroll: true, loader: new Ext.tree.TreeLoader({ dataUrl:'/treeOperation.do?action=loadTree' }), root:new Ext.tree.AsyncTreeNode({ id : "treeContact", text: '联系人', draggable:false, expanded: true // 展开根节点下的节点 }), listeners:{ click : function(node){ if(node.id == "treeContact"){ // 如果点击的是根节点,则 GridPanel 显示所有的数据 // store.load({params:{flag:'all'}}); } else if(node.isLeaf() == true){ // 如果点击的是枝节点的话,则根据 ID 查询联系人的信息 // store.load({params:{flag:'contacter',contacterId:node.id}}); }else{ // 如果既不是根节点也不是枝节点,那么点击的就是分组节点, // 则 GridPanel 显示对应分组号的联系人信息 // store.load({params:{flag:'group',groupId:node.id}}); } } } }); // 添加 树的右键菜单 contacterTree.on('contextmenu', menuShow); function menuShow ( node ) { treeRightMenu.show(node.ui.getAnchor()); node.select();//让右击是选当前节点 }; var treeRightMenu = new Ext.menu.Menu({ id: 'treeMenuContext', items: [ { text: '搜索联系人', icon:"../images/shared/icons/fam/search.gif", handler:function() { Search_Contacter("搜索联系人"); // 具体可以根据自己的需求来写。。 } }, { text: '添加联系人', icon:"../images/shared/icons/fam/add.gif", handler:function() { AddContacter("新增联系人"); // 具体可以根据自己的需求来写。。 } },{ text: '添加分组', icon:"../images/shared/icons/fam/add.gif", handler:function() { AddContacterGroup("新增分组"); // 具体可以根据自己的需求来写。。 } },{ text: "删除", icon: "../images/shared/icons/fam/delete.gif", handler:function() { treeDelContacter(); // 具体可以根据自己的需求来写。。 } } /* ,{ text:"修改", icon: "../images/shared/icons/fam/cog_edit.png", handler:function() { treeEditContacter(); } } */ ] }); // 当选父节点时,让其子节点相应选 contacterTree.on('checkchange', function(node, checked) { node.expand(); node.attributes.checked = checked; node.eachChild(function(child) { child.ui.toggleCheck(checked); child.attributes.checked = checked; child.fireEvent('checkchange', child, checked); }); }, contacterTree); // 删除事件 function treeDelContacter(){ // 当右键点击删除时,先判断右键点击的是分组节点还是枝节点 // 通过选择模型来得到右键点击的节点 var selectModel = contacterTree.getSelectionModel(); var node = selectModel.getSelectedNode(); if(node.id == "treeContact"){ // 右键根节点 Ext.MessageBox.alert("提示","根节点是不允许删除的!"); }else if(node.isLeaf() == true){ // 右键 联系人节点 var flag = confirm("您确定要删除名为 :“"+node.text+" ”的联系人信息吗?"); if(flag == true){ location.href="/contacterManage.do?action=delContacters&strContacterId="+node.id+";"; //alert("成功删除名为 :"+node.id+" 的联系人信息!"); } }else{ // 右键 分组节点 var flag = confirm("您确定要删除名为 :“"+node.text+" ”的分组信息吗?"); if(flag == true){ //alert("成功删除名为 :"+node.id+" 的分组信息!"); location.href="/contacterManage.do?action=delContacterGroup&strGroupId="+node.id+";"; } } } // 修改事件 /* function treeEditContacter(){ // 当右键点击删除时,先判断右键点击的是分组节点还是枝节点 // 通过选择模型来得到右键点击的节点 var selectModel = contacterTree.getSelectionModel(); var node = selectModel.getSelectedNode(); if(node.id == "treeContact"){ // 右键根节点 Ext.MessageBox.alert("提示","根节点是不允许修改的!"); }else if(node.isLeaf() == true){ // 右键 联系人节点 }else{ // 右键 分组节点 } } */ });

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值