1、树控件的简单应用
树控件由Ext.tree.TreePanel类定义,控件的名称为treepanel,TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单,我们先来看下面的代码:
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
}));
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
});
2、树节点Ext.tree.TreeNode
TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等。
3、异步树Ext.tree.AsyncTreeNode
在很多时候,树的节点是动态产生的,也就是需要从服务器端的一个url中获得树的节点信息。ExtJS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,就可以从服务器端动态加载树的节点信息。我们来看下面的代码:
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
width:100
});
treedata.js这个url返回的内容如下:
[{
id: 1,
text: '子节点1',
leaf: true
},{
id: 2,
text: '儿子节点2',
children: [{
id: 3,
text: '孙子节点',
leaf: true
}]
}]
4、树加载器Ext.tree.TreeLoader
凡是异步树节点,都需指定一个树加载器,TreeLoader会根据需要,通过Ajax的方式自动从指定的url或内存中加载树节点信息。
可以在准备加载一个树节点之前,更改TreeLoader的相关信息,示例:
myTreeLoader.on("beforeload", function(treeLoader, node) {
this.baseParams.category = node.attributes.category;
}, this);
分享到:
相关推荐
学习YUI.Ext 第五天–关于树TreePanel(Part 1) 效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp 树组件是YUI.Ext 0.40 新增的组件。虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发...
### 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点) #### 引言 在本篇文章中,我们将深入探讨如何使用YUI.Ext库中的TreePanel组件来实现异步获取树节点的功能。不同于同步加载方式,异步加载能够显著...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...
这个"带复选框的树"是指在TreePanel中每个节点都带有可选中的复选框,用户可以通过这些复选框来选择或操作树形结构中的数据。这种设计通常用于权限管理、目录选择、层级关系配置等场景,使得用户能够直观地对多级...
TreePanel是一个用于构建交互式树形结构视图的组件,它在YUI.Ext 0.40版本中首次引入。尽管YUI自身已经提供了TREE VIEW组件,但开发者Jack Slocum选择重新开发TreePanel,以提供更丰富的功能和更好的用户体验。以下...
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有待大家一起研究。 异步取节点的思路是这样的: 1、先定义一个初始化...
`TreePanel`是Ext JS中的一个控件,它用于展示树形结构的数据。这种数据结构通常用于表示文件系统、组织架构或任何有层级关系的信息。`TreePanel`的主要特点包括: 1. **节点层次**:每个`TreePanel`都可以包含多个...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
- TreePanel是用来展示树形结构数据的组件,它可以显示节点的层次关系,并支持展开、折叠、拖放等交互操作。 - TreePanel的基础是`TreeStore`,它负责加载和管理树形数据。数据通常以JSON格式提供,包含节点ID、父...
TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel是基于Ext.grid.Panel扩展的,它包含了树形数据的渲染和操作功能。TreePanel可以与Ext.data.TreeStore...
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态加载或更新GridPanel的数据,以及可能的父子数据联动操作。 在实际应用中,你可能会学习到以下...
它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...
接下来,`TreePanel`是用来展示树形结构数据的组件,常用于文件系统或组织结构的展示。与`Ext.Panel`类似,`TreePanel`也可以动态加载本地数据。这通常涉及到`TreeStore`和`TreeNode`的概念。`TreeStore`用于存储和...
在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的界面。在这个特定的场景中,我们关注的是TreePanel中的Checkbox功能以及父子节点间的联动效果。 ...
TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要配置项**: - **root**: 这个配置项定义了树的根节点。通常是一个包含...
它提供了一系列丰富的UI组件,如表格、树形菜单(TreePanel)等,能够帮助开发者快速构建功能强大的Web应用界面。其中,TreePanel是ExtJS中非常常用的一个组件,用于展示具有层次结构的数据。 ### 二、TreePanel组件...