tree的详细讲解

Ext.tree.TreePanel
树状控件,继承自panel


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)
            });
        }
    });
   
 });