`
huigutang
  • 浏览: 976 次
  • 性别: Icon_minigender_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():

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

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对象

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

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


Ext.tree.DefaultSelectionModel
      是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。

      主要方法:
            clearSelections():清除对树中所有节点的选择
            getSelectedNode():取得当前被选中的节点
            isSelected( TreeNode node ):节点是否被选中
            select( TreeNode node ):选中指定节点
            unselect( TreeNode node ):取消指定节点的选中状态
            selectNext():选择当前被选节点的下一个节点
            selectPrevious():选择当前被选节点的上一个节点

Ext.tree.MultiSelectionModel
      是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。

      主要方法:
            clearSelections():清除所有节点的选中状态
            getSelectedNodes():取得被选节点组成的数组
            isSelected( TreeNode node ):节点是否被选中
            select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
            unselect( TreeNode node ):取消指定节点的选中状态


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

[       {           id: 1,           text: "node1",           leaf: true,           check: false      },       {           id: 2,           text: "node2",           children: [               {                   id: 3,                   text: "node3",                   leaf: true              }           ]       }   ]  [ { 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:需要加载子节点的树节点。


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


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

文章已被作者锁定,不允许评论。

相关推荐

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    treePanel与gridPanel技术实现页面的增删改查

    - TreePanel的节点可以包含自定义的扩展属性,用于存储额外的信息或用于特定的业务逻辑。 - TreePanel可以通过配置监听事件来处理用户的交互行为,例如`itemclick`、`beforeexpand`等,实现增删改查功能。 2. **...

    Ext TreePanel Checked Ext复选框树

    5. **配置选项**:`TreePanel`的配置项中,`checkboxModel`或`checked`属性用于启用复选框功能,并控制其行为。`threeState`属性可以开启三态复选框模式,除了已选中和未选中,还有部分选中状态。 6. **API调用**:...

    TreePanel 带复选框的树

    例如,设置`checkboxModel`属性启用复选框,使用`displayField`指定显示的字段,通过`children`字段表示子节点。 2. **JSON数据结构**:JSON数据应包含每个节点的信息,如ID、文本、是否选中等,以及子节点数组。...

    Ext TreePanel

    4. **ColumnModel**:定义了TreePanel中每一列的属性,如宽度、标题、数据绑定等。 5. **CheckboxSelectionModel**:允许用户通过复选框选择多个行,可以设置为只检查不选择(checkOnly: true)。 6. **CheckColumn*...

    Extjs入门教程(treePanel和GridPanel)

    5. 动态加载:当用户点击TreePanel的节点时,根据节点ID或属性动态加载对应的Grid数据。 6. 用户交互:实现拖放功能,允许用户通过拖动TreePanel的节点来调整结构,或者拖放到GridPanel中进行操作。 在"我自己写的...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在TreePanel中,每个节点都具有一些关键属性,如`id`、`leaf`、`attributes`等: - **id**:节点的唯一标识符。 - **leaf**:表示该节点是否为叶子节点。 - **attributes**:节点的一些额外属性,可以通过自定义设置...

    Ext.net TreePanel的Checkbox操作及父子联动

    - JavaScript部分,可能包含了`Ext.create`或`Ext.extend`方法来创建自定义的TreePanel类,并设置了上述提到的属性。 - 服务器端代码可能处理数据源,如填充TreePanel的节点数据,并可能与CheckBoxModel的配置交互...

    Extjs做的treepanel+tab切换页

    在这个应用中,当用户点击树节点时,树的`href`属性被用来获取新的内容,并在TabPanel 中加载,实现了内容的动态切换。 5. **事件监听与处理**:在ExtJS 中,事件监听是实现组件间交互的关键。在这个场景下,我们...

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    无废话ExtJs 系列教程十五[树:TreePanel]

    - **store**:用于存储树结构数据的Store对象,通常包含节点ID、文本、父节点ID等属性。 - **root**:定义树的根节点配置,包括节点ID、文本等。 - **displayField**:指定显示节点文本的字段名。 - **folder...

    2个treepanel相互切换

    4. **面板切换**:在事件处理器中,可以使用`Ext.getCmp()`方法获取另一个TreePanel的引用,然后根据需求调整其可见性(`hidden`属性)或者使用`setActiveItem()`方法在容器(如TabPanel或Viewport)中切换显示的...

    treepanel实例

    本文将深入讲解`Treepanel`的使用,包括其基本概念、配置选项、事件处理以及与后台数据的交互。 1. **Treepanel基础** Ext Tree Panel(简称Tree Panel)是Ext JS中的一个视图组件,用于展示层次化的数据结构,...

    extjs4中panel的accordion布局以及treepanel导航

    2. 在TreePanel中关联这个TreeStore,并配置必要的属性,如`rootVisible`(是否显示根节点)、`displayField`(显示节点文本的字段名)等。 3. 监听节点展开和折叠事件,以决定何时从服务器请求子节点数据。 4. 使用...

    ExtJs TreePanel应用

    此外,ExtJs TreePanel还支持拖放操作,可以通过配置`draggable`和`droppable`属性启用。这使得用户能够方便地重新排列节点,甚至在不同树之间进行移动。 总的来说,ExtJs TreePanel是一个强大且功能丰富的组件,它...

    extjs4 treepanel动态改变行高度示例

    在我们的示例中,我们将展示如何通过CSS的line-height属性动态调整TreePanel中行的高度。line-height属性可以控制元素内文本的行间距,这直接影响了TreePanel中行的高度。在示例的CSS代码部分,我们看到了如下定义:...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在实际应用中,我们可以通过配置TreePanel的属性来定制其外观和行为,例如设置rootVisible来决定是否显示根节点,或者使用loadMask来显示加载遮罩。 接着,我们来看TabPanel。TabPanel是ExtJS提供的一种布局管理器...

    TreePanel基本使用

    创建TreePanel首先需要实例化一个`Ext.tree.Panel`对象,并配置相应的属性。例如,设置标题、宽度、高度等基本信息: ```javascript var treePanel = Ext.create('Ext.tree.Panel', { title: '文件系统', ...

    Extjs复习笔记(十八)-- TreePanel

    在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...

Global site tag (gtag.js) - Google Analytics