lixue150
- 浏览: 78429 次
- 性别:
- 来自: 合肥
-
文章分类
最新评论
-
lslsday：
djggggggggggggggggggggggggggggg ...
简单的Ckeditor--实现上传的功能 -
jps7777777：
fdsgfds
Ckeditor简单的数据提交
主要一个TreePanel静态树的学习，进入公司以后，发现公司在使用ExtJs，而且我以往使用的是Jquery，所以开始学习ExtJs的东西，然后公司安排一些任务给自己做
tree.tml
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>静态树</title>
<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>
<style type="text/css">
.container {
background: url(delete.gif) no-repeat 1px 2px !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var mytree = new Ext.tree.TreePanel({
el : "container",//应用到的html元素的id
animate : true,//以动画形式伸展，收缩子节点
title : "Extjs静态树",//标题
collapsible : true,//可折叠
enableDD : true,//不仅可以拖动，还可以通过拖动改变节点的层次结构
enableDrag : true,//效果上面的拖动，实际没有变化
rootVisible : true,//显示根节点
autoScroll : true,//内容溢出时产生滚动条，默认为false
autoHeight : true,//自动高度，默认为false
width : 200,//宽度
lines : true,//节点间的虚线条
useArrows : false
//是否在树中使用Vista样式箭头，默认为false
});
//根节点
var root = new Ext.tree.TreeNode({
id : "root",//节点id
text : "控制面板",//节点上的文本信息
expanded : true,
//是否展开节点，默认为false
qtip:"控制面板",//节点上的提示信息
//icon:"delete.gif",//节点图标对应的路径
iconCls:"container"
});
//第一个子节点及其子节点
var sub1 = new Ext.tree.TreeNode({
id : "news",
text : "新闻管理",
singleClickExpand : true//是否通过单击方式展开节点
});
sub1.appendChild(new Ext.tree.TreeNode({
id : "addNews",
text : "添加新闻",
href : "http://www.baidu.com",//节点的连接属性，默认为#
hrefTarget : "_parent",//显示节点连接的目标框架
qtip : "打开百度",
listeners : {//监听
"click" : function(node, e) {
alert(node.text)
}
}
}));
sub1.appendChild(new Ext.tree.TreeNode({
id : "editNews",
text : "编辑新闻"
}));
sub1.appendChild(new Ext.tree.TreeNode({
id : "delNews",
text : "删除新闻"
}));
root.appendChild(sub1);
root.appendChild(new Ext.tree.TreeNode({
id : "sys",
text : "系统设置",
}));
mytree.setRootNode(root);//设置根节点
//渲染树形,用于树形的显示，没有它就不会有显示
mytree.render();
})
</script>
</head>
<body style="margin: 10px;">
<div id="container" class="container"></div>
</body>
</html>
所使用的加包，在accordion布局设置的时候，已经上传上去了，如果使用的话，可以去看看
出来的效果
- 大小: 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 1368Ext.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 795<!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 15711.xtype属性 xtype ... -
ExtJs学习--ViewPort练习
2011-07-29 11:42 5075我现在是想要熟悉ExtJs的一些属性，然后在进行相关的应用 ... -
TreePanel学习--AsyncTreeNode
2011-07-28 10:47 1513主要与TreeNode进行一些比较，看这两个新建的树的代码有什 ...
相关推荐
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式，它扩展了基本的树视图，加入了复选框功能。 复选框树（Checked Tree）允许用户通过复选框来选择或取消选择树结构中的节点。这种...
TreePanel是Ext.container.Container的一个子类，它可以包含多个TreeNode，每个TreeNode代表树形结构中的一个节点。每个节点可以有子节点，形成一个层次结构。在ExtJS中，TreePanel的数据模型通常是Ext.data....
在给定的“ExtJS samples”压缩包中，我们可以期待找到关于如何使用ExtJS的TreePanel和TreeNode的相关示例。TreePanel是ExtJS中的一个组件，用于展示层次结构的数据，而TreeNode则是TreePanel的基本构建块，代表树形...
在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...
例如，可以创建一个名为`TreeNode`的模型，包含`text`、`leaf`、`expanded`等字段。 4. **示例代码** ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext....
在Visual Studio（VS）开发环境中，使用ExtJS的TreePanel组件可以创建动态的、交互式的树形结构数据展示。本文将深入探讨如何基于Ext4.2版本实现一个...学习并掌握TreePanel的使用，对于开发复杂的Web应用非常有帮助。
4. TreeLoader自动解析JSON数据，创建并添加TreeNode到TreePanel。 这种动态加载方式提高了应用的性能和响应速度，尤其是在处理大量数据时。同时，它也使得用户界面更加流畅，因为只有在需要时才会加载数据，减少了...
TreePanel包含一系列的TreeNode，每个TreeNode可以有子节点，形成一个可折叠和展开的层次结构。下面我们将详细讨论`ext.tree`的主要特性与使用方法： 1. **配置项**： - `root`: 树的根节点，可以设置为一个...
在JavaScript的ExtJS框架中，TreePanel是一种强大的组件，它用于展示树形结构的数据，尤其适合处理JSON格式的信息。TreePanel允许用户以交互的方式浏览层级化的数据，这在很多应用场景中，如文件系统、组织结构或者...
TreePanel继承自Panel，它利用Ext.tree.TreeNode节点对象来构建树形结构，并提供了丰富的属性和方法供开发者使用，从而实现复杂的功能。 在TreePanel中，TreeNode节点代表树中的一个节点，它的常用属性包括： - ...
【磁盘目录树（EXT-js）】是一种使用EXT-js库构建的前端应用，它主要用于在Web界面中展示计算机硬盘上的目录结构，使用户能够像在操作...通过深入学习EXT-js的文档和实践，可以创建出更加复杂和个性化的目录树应用。
标题“EXT--tree”暗示了我们讨论的主题与EXT.js库中的...通过深入学习EXT.js TreePanel的这些方面，并结合压缩包中的“折扣模块代码”，开发者可以提升EXT.js应用的开发能力，特别是对于需要处理复杂层级关系的场景。
- **TreeNode**: 单个节点。 - **TreeLoader**: 负责加载节点数据。 - **自定义TreeLoader**: 实现更灵活的数据加载机制。 #### 九、表单(Forms) - **FormPanel基本应用**: - 用于创建和管理表单。 - **...
`TreePanel`组件的核心是`TreeNode`对象，它作为树结构的基本单元。通过`TreeNode`可以构建出树的层级关系，并且可以方便地添加子节点或者删除节点。除了基本的节点管理外，`TreePanel`还提供了一系列扩展功能，比如...
ExtJS Tree API提供了丰富的功能，如`TreePanel`，`TreeStore`，`TreeNode`等类，每个类都有许多方法和配置项供开发者使用。 这个压缩包可能包含示例代码、教程文档、练习项目等资源，帮助学习者更好地理解和实践...
#### 一、Ext.tree.TreePanel `Ext.tree.TreePanel`是Ext框架中的一个组件，用于创建树形结构的数据展示。它提供了丰富的配置选项和方法来控制树形结构的行为和外观。 - **root**：定义树的根节点。此属性为必须...
在ExtJS中，TreePanel组件的核心是TreeNode对象，它代表了树中的每一个节点。根据树节点是否拥有子节点，可以将其分为叶子节点和非叶子节点。叶子节点是树的终端节点，不包含任何子节点；非叶子节点则可以拥有子节点...
例如，通过 `Ext.tree.TreePanel` 和 `Ext.tree.TreeNode` 创建的树形结构会自动渲染到页面上。 - **国际化支持**：JSP 页面中的 `<s>` 标签来自 Struts 框架，表明该项目可能还包含了对国际化的支持。 ### 5. 总结...