1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/gridPanel_columnModel.js 实现树 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src='study/treePanel.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<!--------------------- 上层 -->
<!-- 这里使用ContainerLayout: 垂直方式布局 -->
<div id='ContainerLayout' style='float:left;width:300px'></div>
<!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 -->
<div id='hello' style='float:left;width:300px;padding-left: 10px'></div>
<div id='right-upward' style='float:left;width:700px;padding-left:15px'></div>
<!--------------------- 中间------------------------------------>
<div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div>
<!--------------------- 底层------------------------------------>
<div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div>
<!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 -->
<div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div>
<!-- 表格布局 -->
<div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div>
</body>
</html>
2. treePanel.js 代码如下：
Ext.onReady(function(){
var node = {
text:'根',
expanded:true, //是否展开子节点，默认为false,子节点不会被展开,表示默认卷是打开状态
leaf:false, //是否为叶子节点，这个要注意下，如果设置为false但没有 children 那么会产生一直读取子节点的展示
children:[
{
text:'根下节点一[user图标]',
leaf:true,
iconCls:'nodeicon' //ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标。
},
{
text:'根下节点二',
leaf:true,
iconCls:'nodeicon'
},
{
text:'根下节点三',
leaf:false,
expanded:false,
children:[
{
text:'节点三子节点一',
leaf:true
},
{
text:'节点三 子节点二',
leaf:false,
expanded:true,
children:[
{
text:'节点三 子节点二节点一',
leaf:true
},
{
text:'节点三 子节点二节点二',
leaf:true
}
]
}
]
}
]
}
//树面板(本地数据源)
var treeLocal = new Ext.tree.TreePanel({ //创建一个TreePanel对象
title:'TreePanelLocal',
root:node //根节点
});
//树面板(服务器数据源)
var treeService = new Ext.tree.TreePanel({
title:'TreePanelLocal',
rootVisible:false, //有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。
root:node, //根节点
loader: new Ext.tree.TreeLoader({
url: '暂时未实现此功能' //树的数据载入组件，通过url寻找service端返回的json,并且自动转换成 TreeNode。
})
});
var form = new Ext.form.FormPanel({
items: [treeLocal, treeService],
style:'margin:10px',
buttons:[
new Ext.Button({
text:'Submit',
handler:function(){
selectNode = treeLocal.getSelectionModel().getSelectedNode(); //获取选中项。
alert('TreePanelLocal：' + (selectNode == null ? treeLocal.root.text : selectNode.text));
}
})
],
//height:400,
frame:true
});
//窗口
new Ext.Window({
title:'窗体',
modal:true,
width:470,
height:570,
items:form
}).show();
})
3. 效果如下：
4. 源代码：
index.jsp
study/treePanel.js
相关推荐
在"无废话ExtJS系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...
本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...
在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
总之，"无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践，你可以创建出更加灵活和高效的用户界面，同时利用源码和工具...
TreePanel是ExtJS中的一个树形控件，它允许你展示层级结构的数据。在教程中，你可能会学到如何创建和配置TreePanel，包括加载数据、设置节点图标、处理节点的展开和折叠事件，以及添加拖放功能。TreePanel通常用于...
在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...
1. **ExtJS TreePanel**：TreePanel 是ExtJS中用来展示层级数据的组件，类似于HTML中的树状结构。在这个例子中，它被用来显示具有层级关系的数据，如目录结构或组织架构。用户可以通过点击节点来展开或折叠子节点，...
主要方法： collapseAll()：收缩所有树节点 expandAll()：展开所有树节点 getRootNode()：获取根节点 getNodeById(String id)：获取指定id的节点 expand( [Boolean deep], [Boolean anim],
通过java 访问数据库而生成节点 子节点的 ID 与 父节点的关系为“父节点id_子节点id”此id为数据库中的id 同理“父节点id_子节点id_子子节点id”,因此加载树时将node.id做为参数 通过split("_")，根据数据的长度就...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
【标题】"无废话ExtJs 教程十二[员工信息表Demo：AddUser]"是一个针对初学者和进阶者设计的教程，旨在帮助他们更好地理解和应用ExtJS框架创建员工信息管理系统的添加用户功能。在本教程中，我们将深入探讨如何使用...
1. **TreePanel**：TreePanel是ExtJS中用于展示树形结构的组件，它可以显示可折叠/展开的节点，每个节点可以有子节点。配置TreePanel时，我们需要指定数据源、节点模型、以及各种UI样式和行为设置。 2. **数据源**...
第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 第十八讲:extjs4.0的高级组件tree+grid整合案例上 第十九讲:extjs4.0的...
页面组件示例中心可能包含了一系列EXTJS3.0的组件演示，包括树形组件的实例，你可以通过这些实例学习如何在实际项目中使用和定制EXTJS3.0的树组件，提升你的前端开发能力。 总结来说，EXTJS3.0的树形组件提供了一种...
EXTJS中的TreePanel是用于展示层级数据的组件，它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法，使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明： 1. **主要...
2. **TreePanel组件**：EXTJS中的树形控件是通过TreePanel组件实现的。TreePanel包含了渲染树形结构所需的配置项，如store、root、displayField等。 3. **TreeStore**：存储树形数据的仓库，它负责加载和管理树形...
在ExtJS框架中，TreePanel是一种用于展示层次结构数据的组件，它以树形结构的形式显示数据。在设计用户界面时，我们可能需要自定义TreePanel中的节点图标以增强视觉效果或传达特定的信息。本篇将详细介绍如何通过CSS...