Ext核心API详解-Ext.tree.TreePanel

config定义{

animate : Boolean,

containerScroll : Boolean,

ddAppendOnly : String, /*很显然这是api的一个错误,treepanel.js中惟一用到它的地方是this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {

ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true

})

只有没有定义dropConfig才会影响ddconfig的appendOnly,原api说明是

True if the tree should only allow append drops 只有当值为真时才允许以追加的方式接受拖曳*/

ddGroup : String,

ddScroll : Boolean,

dragConfig : Object,

dropConfig : Object,

enableDD : Boolean,

enableDrag : Boolean,

enableDrop : Boolean, //以上参数更应该放在Ext.dd中学习

hlColor : String, //高亮颜色

hlDrop : Boolean //曳入时高亮显示?

lines : Boolean //显示树形控件的前导线

loader : Ext.tree.TreeLoader //这是个重要的参数,用于方便的构建树形菜单,用于远程调用树状数据

pathSeparator : String //默径分隔符.默认为/

rootVisible : Boolean //根可见?这是个有趣的属性,因为树只能有且仅有一个根,当我们需要两个或更多的"根"时就要用它了

selModel : Boolean /*选择模式,默认的是一个Ext.tree.DefaultSelectionModel实例,也可以是 Ext.tree.MultiSelectionModel,如果你有兴趣,还可以自己定义,当然,它绝对不是一个布尔值

另,虽然内置的两种选择方式都支持getSelectedNodes和clearSelections() 方法,但treenode中好象只用到的select/unSelecte/isSelected,如果自己继承写SelectionModel应该至少支持这三个方法

*/

singleExpand : Boolean //在所有的兄弟节点中只能有一个被展开

属性

dragZone : Ext.tree.TreeDragZone

dropZone : Ext.tree.TreeDropZone

root : Node //最重要的也就是这个属性了

方法

TreePanel( Object config )

构造

collapseAll() : void

expandAll() : void

收起展开所有节点

expandPath( String path, [String attr], [Function callback] ) : void

由path找到节点,展开树到此节点

getChecked( [String attribute], [TreeNode startNode] ) : Array

返回一个包含所有选中节点的数组.或者所有选中节点的属性attribute组成的数组

getEl() : Element

返回当前TreePanel的容器对象

getLoader() : Ext.tree.TreeLoader

当前所使用的TreeLoader对象

getNodeById( String id ) : Node

由指定的节点id找到节点对象

getRootNode() : Node

得到根节点,同属性root

getSelectionModel() : TreeSelectionModel

得到选择模式

getTreeEl() : Ext.Element

返回当前tree下面的元素

selectPath( String path, [String attr], [Function callback] ) : void

由path选择指定的节点,它事实上调用的是expandPath用于展开节点对象

setRootNode( Node node ) : Node

设置根节点

事件

append : ( Tree tree, Node parent, Node node, Number index )

beforeappend : ( Tree tree, Node parent, Node node )

beforechildrenrendered : ( Node node )

beforeclick : ( Node node, Ext.EventObject e )

beforecollapsenode : ( Node node, Boolean deep, Boolean anim )

beforeexpandnode : ( Node node, Boolean deep, Boolean anim )

beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )

beforeload : ( Node node )

beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )

beforenodedrop : ( Object dropEvent )

beforeremove : ( Tree tree, Node parent, Node node )

checkchange : ( Node this, Boolean checked )

click : ( Node node, Ext.EventObject e )

collapsenode : ( Node node )

contextmenu : ( Node node, Ext.EventObject e )

dblclick : ( Node node, Ext.EventObject e )

disabledchange : ( Node node, Boolean disabled )

dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )

enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )

expandnode : ( Node node )

insert : ( Tree tree, Node parent, Node node, Node refNode )]

load : ( Node node )

move : ( Tree tree, Node node, Node oldParent, Node newParent, Number

nodedragover : ( Object dragOverEvent )

nodedrop : ( Object dropEvent )

remove : ( Tree tree, Node parent, Node node )

startdrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )

textchange : ( Node node, String text, String oldText )

Ext.tree.TreeNode

树状控件的节点类,继承自Ext.data.Node

config{

allowChildren : Boolean

allowDrag : Boolean

allowDrop : Boolean

checked : Boolean //无论设为真还是假都会在前面有个选择框,默认未设置

cls : String

disabled : Boolean

draggable : Boolean

expandable : Boolean

expanded : Boolean

href : String //超链接

hrefTarget : String

icon : String //图标

iconCls : String

isTarget : Boolean //是拖曳的目标?

qtip : String //提示

qtipCfg : String //

singleClickExpand : Boolean //单击展开

text : String //文本内容

uiProvider : Function //默认Ext.tree.TreeNodeUI,如果想自己提供ui可以自已再继承Ext.tree.TreeNodeUI

}

属性

disabled : Boolean

text : String

ui : TreeNodeUI //此属性只读.参见uiProvider

方法

TreeNode( Object/String attributes )

构造

collapse( [Boolean deep], [Boolean anim] ) : void

收起本节点

collapseChildNodes( [Boolean deep] ) : void

收起子节点

disable() : void

enable() : void

禁止允许

ensureVisible() : void

确保所有的父节点都是展开的

expand( [Boolean deep], [Boolean anim], [Function callback] ) : void

展开到当前节点

expand( [Boolean deep], [Boolean anim], [Function callback] ) : void

展开本节点

expandChildNodes( [Boolean deep] ) : void

展开所有的子节点

getUI() : TreeNodeUI

返回ui属性

isExpanded() : Boolean

当前节点是否展开

isSelected() : Boolean

当前节点是否选择

select() : void

选择当前节点

setText( String text ) : void

设置当前节点的文本

toggle() : void

在展开或收起状态间切换

unselect() : void

取消选择

事件

beforechildrenrendered : ( Node this )

beforeclick : ( Node this, Ext.EventObject e )

beforecollapse : ( Node this, Boolean deep, Boolean anim )

beforeexpand : ( Node this, Boolean deep, Boolean anim )

checkchange : ( Node this, Boolean checked )

click : ( Node this, Ext.EventObject e )

collapse : ( Node this )

contextmenu : ( Node this, Ext.EventObject e )

dblclick : ( Node this, Ext.EventObject e )

disabledchange : ( Node this, Boolean disabled )

expand : ( Node this )

textchange : ( Node this, String text, String oldText )

Ext.tree.AsyncTreeNode

继承自Ext.tree.TreeNode,支持异步创建,很显然除了多个loader与TreeNode没什么区别

config{

loader : TreeLoader

}

属性

loader : TreeLoader

方法

AsyncTreeNode( Object/String attributes )

isLoaded() : Boolean

isLoading() : Boolean

reload( Function callback ) : void

事件

beforeload : ( Node this )

load : ( Node this )

Ext.tree.TreeNodeUI

为节点输出而设计,如果想创建自己的ui,应该继承此类

方法

addClass( String/Array className ) : void

增加样式类

getAnchor() : HtmlElement

返回<a>元素

getIconEl() : HtmlElement

返回<img>元素

getTextEl() : HtmlNode

返回文本节点

hide() : void

隐藏

isChecked() : Boolean

选中?

removeClass( String/Array className ) : void

移除样式

show() : void

显示

toggleCheck( Boolean (optional) ) : void

切换选中状态

Ext.tree.RootTreeNodeUI

api上说它继承自object,事实上treenodeui它中继承自Ext.tree.TreeNodeUI,也只有这样才合理,用于输出根节点

Ext.tree.TreeLoader

用于远程读取树状数据来构造TreeNode的子节点

config{

baseAttrs : Object //构造子节点的基础属性

baseParams : Object //请求url的传入参数

clearOnLoad : Boolean //重新载入前先清空子节点

dataUrl : String //远程请求时的url

preloadChildren : Boolean //节点第一次载入时递归的载入所有子孙节点的children属性

uiProviders : Object //ui提供者

url : String //等同于dataUrl

}

方法

TreeLoader( Object config )

构造

createNode() : void

创建节点,treeloader.js中定义的是createNode : function(attr),传入的应该是一个定制的节点

load( Ext.tree.TreeNode node, Function callback ) : void

为node载入子节点

事件

beforeload : ( Object This, Object node, Object callback )

load : ( Object This, Object node, Object response )

loadexception : ( Object This, Object node, Object response )

Ext.tree.TreeSorter

排序

config{

caseSensitive : Boolean//大小写敏感,默认为false

dir : String //正序还是倒序,可选asc/desc.默认asc

folderSort : Boolean //叶节点排在非叶节点之下 ,默认为真

leafAttr : String //在folderSort中排序时的使用的属性,默认为leaf

property : String //用于排序的属性.默认为text

sortType : Function //可以通过特定的sortType先转换再排序

}

方法

TreeSorter( TreePanel tree, Object config )

构造

Ext.tree.TreeFilter

过滤器

clear() : void

清除当前过滤器

filter( String/RegExp value, [String attr], [TreeNode startNode] ) : void

filterBy( Function fn, [Object scope] ) : void

使用过滤器,但正如api中所说的,这是个实验性的数,还有很多不足,基本上很难真的作用

惯例来个小示例

Ext.onReady(function() {

//建立树

var tree=new Ext.tree.TreePanel( {

el:Ext.getBody(),

autoScroll:true,

animate:true,

height:200,

enableDD:true,

containerScroll: true

});

//建立根

var root = new Ext.tree.TreeNode( {

text: 'Ext JS',

draggable:false,

id:'root'

});

//设置根

tree.setRootNode(root);

tree.render();

//增加子节点

root.appendChild(new Ext.tree.TreeNode( {

text: 'csdn',

href:'http://www.csdn.net',

id:'node_csdn'

}));

root.appendChild(new Ext.tree.TreeNode( {

text: 'duduw',

href:'http://www.duduw.com',

id:'duduw_Node'

}));

//设置属性

tree.root.attributes.description='这是根节点';

//getNodeById

tree.getNodeById('duduw_Node').attributes.description='这是叶节点';

//选择第一个子节点

tree.selectPath('/root/node_csdn');

//事件

tree.on('click',function(node,e) {

e.stopEvent();

if(node.attributes.description) {

Ext.MessageBox.show( {title:'您选择了',

msg:String.format("description:{0}<br/>href:{1}",node.attributes.description,node.attributes.href)

});

}

});

来源：/article/5099710.html