lixue150
- 浏览: 78436 次
- 性别:
- 来自: 合肥
-
文章分类
最新评论
-
lslsday：
djggggggggggggggggggggggggggggg ...
简单的Ckeditor--实现上传的功能 -
jps7777777：
fdsgfds
Ckeditor简单的数据提交
主要与TreeNode进行一些比较，看这两个新建的树的代码有什么区别
tree.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>treePanel.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var mytree = new Ext.tree.TreePanel({
renderTo : 'form',
animate : false,//以动画形式伸展,收缩子节点，如果false则一步到位显示出来，中间没有那个缓冲的效果
title : '静态树',
collapsible : true,//是否收缩,右上角的下拉框
autoScroll : true,//高度超出范围是否显示滚动条
height : 300,
width : 200,
lines : true,//横竖线
loader : new Ext.tree.TreeLoader(),//加载节点数据
root : new Ext.tree.AsyncTreeNode({//结点
id : 'root',
text : '根结点',
expanded : true,//是否展开
leaf : false,//是否为叶子结点,如果是叶子结点，则图标前面不会有+号，如果不会则有+号
children : [ {
text : '子结点一',
leaf : true
}, {
text : '子结点二',
leaf : false,
children : [ {
text : '子结点二一',
children : [ {
text : '子节点二一一',
leaf : true
} ]
}, {
text : '子结点二二',
leaf : true
} ]
}, {
text : '子结点三',
leaf : false,
children : [ {
text : '子结点三一',
leaf : true
} ]
} ]
})
});
});
</script>
</head>
<body>
<div id='form'></div>
</body>
</html>
最后的效果显示
- 大小: 4.6 KB
分享到：
发表评论
-
Struts2.0.11+spring2+Hibernate3jar包
2011-11-04 11:54 917Struts2.0.11+spring2+Hibernate3 ... -
Ext+struts2.1.6+spring2+hibernate3的jar包
2011-11-02 11:18 996Ext+struts2.1.6+spring2+hiberna ... -
设置下拉框的初始值
2011-10-27 14:50 6510var summaryDataCombo = new Ext. ... -
Ext.grid.ColumnModel
2011-08-08 13:24 1369Ext.grid.ColumnModel 主 ... -
Ext进行查询后分页的问题
2011-08-08 10:58 1178在Ext进行查询后 分页可以出现效果，但是单击下一页或是最后一 ... -
TreePanel常用配置
2011-08-08 10:32 983TreePanel基本配置参数: //TreePane ... -
TextField
2011-08-05 11:30 2415Ext.form.TextField 配置项： ... -
FormPanel常用的属性
2011-08-05 11:30 1265Ext.form.FormPanel 配置项： ... -
ext DateField控件格式
2011-08-04 17:49 2093以下是从网上查找的一 ... -
GridPanel简单实例
2011-08-01 09:31 797<!DOCTYPE html PUBLIC " ... -
Ext.grid.GridPanel
2011-08-01 09:15 1131Ext.grid.GridPanel 主要配置项： store ... -
ExtJs FormPanel 其他组件的应用
2011-07-29 16:50 888<!DOCTYPE html PUBLIC " ... -
ExtJs FormPanel 空验证
2011-07-29 15:43 1139<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel的checkboxToggle属性效果
2011-07-29 14:49 1550<!DOCTYPE html PUBLIC " ... -
FormPanel fieldset应用
2011-07-29 14:36 862练习fieldset的使用 <!DOCTYPE htm ... -
ExtJs-FormPanel学习
2011-07-29 14:17 877<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel主要配置项
2011-07-29 13:53 1031配置项： items：一个元素或元素数组 buttons： ... -
ExtJs viewPort属性
2011-07-29 11:57 15721.xtype属性 xtype ... -
ExtJs学习--ViewPort练习
2011-07-29 11:42 5075我现在是想要熟悉ExtJs的一些属性，然后在进行相关的应用 ... -
TreePanel学习--TreeNode
2011-07-28 10:09 1659主要一个TreePanel静态树 ...
相关推荐
### 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点) #### 引言 在本篇文章中，我们将深入探讨如何使用YUI.Ext库中的TreePanel组件来实现异步获取树节点的功能。不同于同步加载方式，异步加载能够显著...
在本文中，我们将深入探讨EXTJS中的树形组件（TreePanel），以及如何创建一个简单的异步加载和拖放功能的示例。EXTJS TreePanel 是一个强大的组件，用于展示层次结构数据，通常用于组织目录、文件系统或组织结构等。...
为了实现节点的异步加载，ExtJS提供了Ext.tree.AsyncTreeNode类，允许树节点在用户展开时异步加载子节点数据。与之相配合的是Ext.tree.TreeLoader类，它负责管理和执行加载节点数据的任务。TreeLoader通常用于配置...
另一种是异步加载子节点信息的树节点，即`Ext.tree.AsyncTreeNode`，这种节点在初始加载时不包含所有子节点，只有在需要时才从服务器请求数据。 创建TreePanel的基本步骤如下： 1. 首先，我们需要定义一个数据存储...
如果一个节点没有`leaf：true`属性，那么当用户展开该节点时，Ext会通过树面板(`treepanel`)的加载器去向服务器请求数据，通常用于动态加载子节点。请求中会包含当前节点的ID，以便服务器根据ID返回相应的子节点数据...
在配置中，`id`设为'ptree'，`region`设为'west'，`layout`设为'anchor'，`border`设为false以隐藏边框，`rootVisible`设为false不显示根节点，而`root`是一个新的Ext.tree.AsyncTreeNode，这表明数据将通过异步方式...
第二个实例则展示了如何使用Ext.tree.AsyncTreeNode来创建具有异步加载子节点功能的TreePanel。在这些示例中，TreeLoader的dataUrl属性被用来指定Servlet的URL，从而获取数据。 为了实现这些功能，文中还介绍了如何...
这里定义了一个`TreePanel`，它使用`AsyncTreeNode`作为根节点，并配置了异步加载器(`TreeLoader`)，该加载器指向了一个XML文件，该文件包含了树形菜单的具体数据。 #### 4. 添加链接及事件处理 为了让树形菜单中...
`TreeNode`是树节点的基本类，而`TreePanel`则是整个树形视图的容器，它包含节点的管理、事件处理和用户交互逻辑。 - `Ext.tree.AsyncTreeNode`：允许动态加载子节点，提高用户体验，减少初次加载时的数据量。 - ...
- 创建了一个根节点`AsyncTreeNode`，其`id`设置为`-100`，这与我们在数据库中插入的第一条记录相匹配，作为整个组织结构的根节点。 3. **后端处理**：后端需要根据传入的`node`参数查询相应的子节点数据，并将其...
- 创建`TreePanel`实例，配置其属性，包括宽度、高度、动画效果等。 - 定义事件处理器，如`treeClk`，用于处理树节点的点击事件。 #### 四、代码片段解析 ```java // 后端Java代码示例，用于动态构建树结构数据 ...
- 使用ExtJS库创建一个TreePanel，设置id、region、width、collapsible等属性，初始化时创建一个AsyncTreeNode作为根节点。 - 添加事件监听器，监听树节点的点击事件，获取当前选中的节点id和name。 - 在树节点...
var tree = new Ext.tree.TreePanel({ title: "小树一棵", width: 200, height: 200, root: new Ext.tree.AsyncTreeNode({ text: "树根", children: [ {text: "叶子 1", leaf: true}, {text: "叶子 2", leaf...
`AsyncTreeNode`、`DefaultSelectionModel`、`MultiSelectionModel`、`RootTreeNodeUI`、`TreeDragZone`、`TreeDropZone`、`TreeEditor`、`TreeFilter`、`TreeLoader`、`TreeNode`、`TreeNodeUI`、`TreePanel`等是树...
this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, rootVisible : false, root : new Ext.tree.AsyncTreeNode({ draggable : false, expanded : true }), loader : ...
var tree = new Ext.tree.TreePanel({ height: 300, width: 400, animate: true, enableDD: true, containerScroll: true, rootVisible: false, frame: true, loader: new Ext.tree.TreeLoader({dataUrl: '...
ExtJS 中有两种类型的树节点：普通树节点（TreeNode）和异步加载节点（AsyncTreeNode）。普通节点的数据一次性加载，而异步节点则支持按需从服务器动态加载数据，这在处理大量或动态更新的数据时非常有用。异步树...