`

Ext.tree

    博客分类:
  • 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地址,返回子节点数据,返回的数据格式如下:

[  
    {  
        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:需要加载子节点的树节点。





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





11、Ext.tree.TreeSorter
      主要配置项:
            property:用于排序的节点属性名,默认为text。
            dir:排序方向,可选值有asc、desc,默认为asc。
            caseSensitive:是否区分大小写,默认为false。
            folderSort:叶节点是否排在非叶节点之下,默认为false。
            leafAttr:叶子节点在folder排序时的值,默认为leaf。
            sortType:一个自定义函数用于在排序前转换节点值。

分享到:
评论

相关推荐

    Ext.tree.TreeLoader附带封装的json类

    在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    这个实例结合了多个技术,包括Accordion布局、Servlet、Struts2以及JSON数据交互,以及Ext.tree.Panel组件,以创建一个功能丰富的用户界面。 Accordion布局是ExtJS中的一个布局管理器,它允许在一个区域内组织多个...

    Ext.Tree.Panel

    `Ext.Tree.Panel`是EXT JS库中的一个重要组件,用于展示层次结构的数据,通常用作树形菜单或文件系统目录的视图。这个组件是EXT JS框架中用于创建交互式、可扩展的树结构的工具。以下是对`Ext.Tree.Panel`相关知识的...

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径...支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail.com

    ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree

    【标题】"ext-tree.rar_ext_ext tr_ext tre_ext.tr_ext.tree" 暗示这是一个关于Ext JS库中TreePanel组件的实例,其中可能包含了用于创建和管理数据结构的树形视图,以及与数据库交互的功能。 【描述】"ext的树的...

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...

    关于extjs ext.tree

    - 使用`Ext.tree.Column`可以为TreePanel添加列,展示更多节点信息。 - `Ext.menu.Menu`可以与`itemcontextmenu`事件结合,创建节点的右键菜单。 - `Ext.selection.TreeModel`提供了树形选择行为,支持单选或多选...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    var treePanel = Ext.create('Ext.tree.Panel', { title: '动态加载树数据', width: 400, height: 300, store: Ext.create('Ext.data.TreeStore', { model: 'TreeNode', proxy: { type: 'ajax', url: 'tree_...

    自己写的一个动态从后台数据库加载Ext.tree的json数据工具类

    本话题涉及的是一个自定义的工具类,用于处理ExtJS库中的Ext.tree组件,该组件通常用来展示层级结构的数据,比如文件系统或者组织架构。这个工具类的核心功能是获取JSON格式的数据,并将其动态加载到Ext.tree中。 ...

    DWR方式动态加载EXT.Tree

    EXT TreePanel 和 DWR(Direct Web Remoting)是两种在Web开发中常用的技术。EXT TreePanel 是EXT JS库中的一个组件,它用于展示层次结构的数据,通常以树形结构显示,广泛应用于文件系统、组织结构或者菜单的展示。...

    Rails中应用Ext.tree:以中国的省市地区三级联动选择为例

    本篇我们将深入探讨如何在Rails应用中利用Ext.js库的tree组件来创建一个中国省市地区的三级联动选择器。Ext.tree是一个强大的JavaScript组件,它提供了一种组织和展示层次结构数据的方式。 首先,我们需要准备数据...

    FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能 其它还包括文件上传,重命名

    FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能 其它还包括文件上传,重命名

    extTree例子点击出现等

    ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...

    Ext 中的Tree实现不同节点不同的右键菜单

    var tree = Ext.create('Ext.tree.Panel', { ... listeners: { itemcontextmenu: function(view, record, item, index, e) { e.preventDefault(); // 阻止浏览器默认的右键菜单 // 根据记录(record)的属性或...

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是...在`ext tree.js`文件中,你应该能找到EXT JS实现分页树的具体代码和配置。通过理解和定制这些代码,你可以根据实际需求调整分页逻辑,优化数据加载效率,从而提供流畅的用户体验。

    EXT TREE 扩展CHECKBOX JS

    这段代码告诉EXT JS,当我们加载树形数据时,每个节点都应使用`Ext.tree.TreeCheckNodeUI`来渲染,这样每个节点都会有一个与之关联的复选框。 `TreeCheckNodeUI`类提供了以下关键特性: 1. **复选框渲染**:在每个...

    editTreeGrid ext可编辑的treegridpanel

    TreeGrid在EXT JS中通常用作`Ext.tree.Panel`的变体,具有表格的列模型和排序功能。 3. **可编辑性** `editTreeGrid`的核心特性是其可编辑性,这意味着用户可以直接在TreeGrid的单元格中修改数据。EXT JS提供了`...

    extjs tree 节点 链接 新窗口

    而在`Ext.tree.TreeLoader`中,你只需要指定一个URL,TreeLoader会自动发送请求获取JSON数据,JSON数据的结构应该包含树节点的所有信息,如`text`、`children`等。例如: ```javascript var treeLoader = new Ext....

Global site tag (gtag.js) - Google Analytics