`
newlethe
  • 浏览: 83834 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

EXT 树的配置详细属性介绍

    博客分类:
  • 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
      主要配置项:

分享到:
评论

相关推荐

    Ext树例子

    它提供了丰富的UI组件,包括我们今天要讨论的主题——“Ext树例子”。Ext树(Tree)是一种数据结构,它呈现为层次化的节点集合,常用于展示具有层级关系的数据。在本篇文章中,我们将深入探讨Ext树的基本概念、其...

    ext 树控件+数据库

    本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何处理EXT树的事件响应。 首先,EXT树控件的工作原理是基于JSON数据进行渲染。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    ext树的控制选择和撤销,可以直接使用

    EXT树的核心类是`Ext.tree.TreePanel`,它提供了丰富的配置项和方法来定制和操作树形结构。控制选择意味着用户可以通过交互(如点击节点)来选择一个或多个树节点,而撤销功能则允许用户撤消他们的最后一步操作,...

    简单的ext树

    【Ext树】是一种基于Ext JS库的图形用户界面组件,用于呈现层次结构的数据。...通过以上介绍,希望你对“简单的ext树”有了初步的认识。继续深入学习和实践,你将能够熟练地运用Ext JS创建复杂的树形应用。

    Ext下拉列表树

    1. **配置项**:创建下拉列表树时,需要定义一些关键配置项,例如`displayField`用于指定显示的字段,`valueField`用于设置选中项的值,以及`store`用于加载树形数据。`store`通常是一个`Ext.data.TreeStore`,用于...

    Ext TreePanel Checked Ext复选框树

    这种功能对于需要用户进行多级选择的情况非常有用,例如在权限管理、目录结构操作或者配置设置中。以下是对这个特性的详细解释: 1. **复选框行为**:在`TreePanel`中添加复选框,每个节点都有一个与之关联的复选框...

    ext2.0 树的增删改操作

    以上就是关于"ext2.0 树的增删改操作"及其相关知识的详细说明。掌握这些内容,将有助于你在构建Web应用时更熟练地使用树形控件,并且能够根据需求进行定制化开发。同时,了解下拉树的实现,可以使你的界面更加友好,...

    Ext树形菜单(我自己做的)

    在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...

    ext树 无限级 json 数据格式 动态加载

    EXT树的每个节点都是一个`Ext.tree.Node`对象,包含ID、文本、子节点等属性。无限级树意味着树的层级可以无限深,每一层都可以有任意数量的子节点。这样的结构在处理大型数据集时尤为有用,因为一次性加载所有数据...

    ext 异步加载树完整版

    在提供的链接中,博客可能详细解释了如何配置和实现EXT JS的异步加载树。由于没有实际的博客内容,无法给出更具体的细节。不过,通常情况下,开发人员会遇到的问题包括如何正确配置数据请求、处理分页和排序、优化...

    解析Xml构建Ext树形菜单

    首先,让我们了解EXT树形菜单的基本概念。EXT的TreePanel组件是实现树形结构的主要工具,它能够展示层次化的数据,通常用于导航或展现层级关系。树形菜单支持节点的展开、折叠、添加和删除,以及各种交互操作。 要...

    EXT实现动态树的功能

    这些代码会详细地解释如何配置EXT组件,处理数据,以及实现各种交互功能。 总的来说,EXT实现动态树功能涉及到EXT TreePanel的使用、数据存储的配置、节点操作的实现以及用户交互的处理。通过深入理解和实践这些...

    EXT下拉框显示树形结构源代码

    1. **配置树模型**:首先,我们需要定义树的数据模型,这可以通过EXT.data.TreeStore来完成。在这个数据存储中,我们可以设置节点的字段、数据源以及层级关系。 2. **定义树节点**:每个节点都是EXT.data.Model的一...

    如何使用ext写的树形菜单

    创建一个基本的EXT树形菜单,首先需要定义一个配置对象,包含`title`(菜单标题)、`store`(存储树形数据的Store)和`rootVisible`(是否显示根节点)等属性。例如: ```javascript var treePanel = Ext.create...

    ext 关于树目录开发使用

    本文将详细介绍 Ext.js 中关于树目录开发使用的重要知识点,包括相关的函数、关键对象及其操作方法,并简要介绍如何在 Eclipse 中安装支持 Ext.js 的插件。 #### 一、Eclipse 上安装 Ext.js 插件 为了更高效地进行...

    ext实现动态树

    本文将详细介绍如何使用ExtJS来实现一个动态加载的树形结构。 #### 二、所需环境与技术栈 在开始之前,请确保您的开发环境中已经包含了ExtJS库。ExtJS可以在项目中通过CDN链接引入,或者下载安装到本地项目中。...

    EXT 分页,树形结构案列

    2. Store配置:在EXT中,数据存储在Store对象中,配置分页需要设置`autoLoad`、`pageSize`、`proxy`等相关属性。`proxy`通常设置为`AjaxSource`或`RestProxy`,用于与服务器通信,`reader`属性则定义了如何解析...

    Ext grid与树实例

    在提供的"extdemo"压缩包中,可能包含了一个展示如何创建和配置Grid的示例,包括设置列、数据绑定、事件处理和用户交互。 接下来,我们谈谈Ext Tree。Tree组件是一个可折叠的层级结构,常用于展现具有层次关系的...

    磁盘目录树(EXT-js)

    2. **使用NodeInterface**:EXT-js的TreeNode实现了NodeInterface接口,使得每个节点都可以拥有父节点、子节点等属性,方便进行树形结构的操作和遍历。 3. **异步加载**:为了提高性能,通常会使用异步加载技术,只...

    ext利用js生成树

    数据可以通过配置store的root属性来指定树的根节点。 5. **渲染和模板**: 树节点的呈现可以通过使用XTemplate进行定制。XTemplate是一种强大的模板引擎,可以包含HTML和JavaScript逻辑,用于生成复杂视图。 6. **...

Global site tag (gtag.js) - Google Analytics