转自:http://web.qhwins.com/CSS-JS-XML/2011091312092944999107.html

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[/b][b] 
显示

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

Extjs TreePanel API详解的更多相关文章

  1. Extjs Window用法详解

    今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...

  2. Extjs Form用法详解(适用于Extjs5)

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Ex ...

  3. Extjs combox的详解

    Extjs combox的详解 写了哈extjs当中的combox,第一次写,照着网上的例子抄.在上次的例子中,是实现了,可是有一个重大的错误.也就是自己根本没有理解combox从远程服务器获取数据, ...

  4. Ext.tree.TreePanel 属性详解

    Ext.tree.TreePanel 属性详解 2013-06-09 11:02:47|  分类: ExtJs|举报|字号 订阅  原文地址:http://blog.163.com/zzf_fly/b ...

  5. Java 8 Stream API详解--转

    原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解 一.Stream API介绍 Java8引入了 ...

  6. jqGrid APi 详解

    jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...

  7. hibernate学习(2)——api详解对象

    1   Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...

  8. 网络编程socket基本API详解(转)

    网络编程socket基本API详解   socket socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信. socket ...

  9. 转】Mahout推荐算法API详解

    原博文出自于: http://blog.fens.me/mahout-recommendation-api/ 感谢! Posted: Oct 21, 2013 Tags: itemCFknnMahou ...

随机推荐

  1. PHP中oop面向对象基础知识(一)

                                                                                        OOP 基础知识汇总(一) &g ...

  2. XCode 添加自定义framework运行时出现dyld: Library not loaded的解决方法

    XCode添加自定义framework运行时出现dyld: Library not loaded的解决方法 在使用自定义的framework运行时,会出现如下的错误: dyld: Library no ...

  3. zookeeper 选举

    选举概述: 1.启动时期的选举 所有的服务器状态为 LOOKING. 1.1.每个Server 会投出一票(投票规则为:SID.ZXID ,即 服务器ID 和 最大事务ID). 1.2.处理选票 (A ...

  4. Django HTML 转义

    HTML转义 模板对上下文传递的字符串进行输出时,会对以下字符自动转义 小于号< 转换为< 大于号> 转换为> 单引号' 转换为' 双引号" 转换为 " 与 ...

  5. gulp实用配置(1)——demo

    在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了. 最近一段时间不是太忙,所以就写了三份配 ...

  6. iview里select组件搜索后选中的数据和展示内容不一样

    原因:option上的key设置的不唯一 保证key的值唯一

  7. L1 Cache, L2 Cache读取命中率与时钟周期计算

    CPU在Cache中找到有用的数据被称为命中,当Cache中没有CPU所需的数据时(这时称为未命中),CPU才访问内存.从理论上讲,在一颗拥有2级Cache的CPU中,读取L1 Cache的命中率为8 ...

  8. Flutter自定义标题栏之处理状态栏高度

    App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像 ...

  9. textarea显示默认值

    点击不显示默认值,鼠标离开如果没有内容就显示默认值,如果有内容就显示内容. <textarea class="area" onfocus="if(value=='请 ...

  10. MOTT介绍(2)window安装MQTT服务器和client

    MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 window安装MQTT服务器,我这里下载了一个apache-apollo-1.7.1 ...