当前位置: 代码迷 >> Web前端 >> EXT 树的配备详细属性介绍
  详细解决方案

EXT 树的配备详细属性介绍

热度:503   发布时间:2012-10-07 17:28:51.0
EXT 树的配置详细属性介绍

1、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():

?

?

2、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] ):用指定的排序函数为当前节点的子节点进行排序。?

?

?

3、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对象?

?

?

4、Ext.tree.AsyncTreeNode
????? 主要配置项:
??????????? loader:当前节点的树加载器,默认使用树中配置的树加载器
??
????? 主要方法:
??????????? isLoaded():当前节点是否已经加载数据
??????????? reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数?

?

?

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

?

?

6、Ext.tree.RootTreeNodeUI

?

?

7、Ext.tree.DefaultSelectionModel
????? 是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。
?
????? 主要方法:
??????????? clearSelections():清除对树中所有节点的选择
??????????? getSelectedNode():取得当前被选中的节点
??????????? isSelected( TreeNode node ):节点是否被选中
??????????? select( TreeNode node ):选中指定节点
??????????? unselect( TreeNode node ):取消指定节点的选中状态
??????????? selectNext():选择当前被选节点的下一个节点
??????????? selectPrevious():选择当前被选节点的上一个节点

?

?

8、Ext.tree.MultiSelectionModel
????? 是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。
?
????? 主要方法:
??????????? clearSelections():清除所有节点的选中状态
??????????? getSelectedNodes():取得被选节点组成的数组
??????????? isSelected( TreeNode node ):节点是否被选中
??????????? select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
??????????? unselect( TreeNode node ):取消指定节点的选中状态

?

?

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

Js代码?
  1. [??
  2. ????{??
  3. ????????id:?1,??
  4. ????????text:?"node1",??
  5. ????????leaf:?true,??
  6. ????????check:?false??
  7. ????},??
  8. ????{??
  9. ????????id:?2,??
  10. ????????text:?"node2",??
  11. ????????children:?[??
  12. ????????????{??
  13. ????????????????id:?3,??
  14. ????????????????text:?"node3",??
  15. ????????????????leaf:?true??
  16. ????????????}??
  17. ????????]??
  18. ????}??
  19. ]??

????? 树节点展开时,当前节点的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:需要加载子节点的树节点。

?

?

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

?

?

11、Ext.tree.TreeSorter
????? 主要配置项:

  相关解决方案