TreePanelTest.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
animate : true,
autoScroll : true,
loader : new Ext.tree.TreeLoader({
baseParams : {
myName : "Dangzhao"
},
clearOnLoad : false ,
dataUrl : "http://127.0.0.1:8080/CommonWeb/jsonData.jsp" ,
listeners : {
beforeload : function(){alert("beforeLoad")},
load : function(){alert("load")},
loadexception : function(){alert("loadexception")}
},
preloadChildren : false,
requestMethod : "POST"
}),
el : 'tr',
enableDD:true
});
var root = new Ext.tree.AsyncTreeNode({
text: 'Tree Root',
draggable:false,
id:'0'
});
tree.setRootNode(root);
tree.render();
})
</script>
</head>
<body>
<div id="tr" style="width:300;height:400;top:40;left:120;position:absolute "></div>
</body>
</html>
jsonData.jsp
<%@page import="java.util.*" %>
[{
id: 1,
text: 'A Folder Node',
leaf: false
},{
id: 2,
text: 'A leaf Node',
leaf: true
}]
<%
Enumeration enm=request.getHeaderNames();
while(enm.hasMoreElements()){
String key=(String)enm.nextElement();
System.out.println(key+":"+request.getHeader(key));
}
Map p=request.getParameterMap();
Iterator it=p.keySet().iterator();
while(it.hasNext()){
String key=(String)it.next();
System.out.println(key+":"+((String[])p.get(key))[0]);
}
%>
System.out Information
Accept:*/*
Accept-Language:zh-cn
Referer:file://E:\ext-2.0.2\ext-2.0.2\examples\grid\TreePanelTest.html
x-requested-with:XMLHttpRequest
Content-Type:application/x-www-form-urlencoded
Accept-Encoding:gzip, deflate
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
Host:127.0.0.1:7001
Content-Length:22
Connection:Keep-Alive
Cache-Control:no-cache
Cookie:2=1; 74=1; JSESSIONID=LvpgLBNZ!-832179795
node:0
myName:Dangzhao
Show 一下Ext Tree的魅力
- 大小: 7.7 KB
分享到:
相关推荐
通过上述方式,`TreePanel`和`TabPanel`的结合可以构建出强大且易于使用的界面,满足用户对层次结构数据的探索和多视图内容的切换需求。在实际开发中,可以根据具体业务需求进行定制,优化用户体验。
当节点的复选框状态改变时,可以使用`Store`的`sync()`方法将更改同步回服务器。 8. **自定义渲染**:开发者还可以通过重写`TreePanel`的模板或使用`renderer`配置来自定义复选框的显示方式,以满足特定的UI需求。 ...
在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,发现重置操作并未生效。这个问题可能源于多种原因,本文将深入探讨这个问题及其解决方案。 首先,...
另外一种获取被选中节点的方法是使用`getChecked`函数,该函数返回TreePanel中所有被选中的节点数组。我们可以通过遍历这些节点来收集叶子节点的ID。 ```javascript function getTreeCheckedValue() { var ...
- JavaScript部分,可能包含了`Ext.create`或`Ext.extend`方法来创建自定义的TreePanel类,并设置了上述提到的属性。 - 服务器端代码可能处理数据源,如填充TreePanel的节点数据,并可能与CheckBoxModel的配置交互...
使用`proxy`配置项定义数据源,`load`方法用于异步加载: ```javascript proxy: { type: 'ajax', url: 'tree_data.json', // JSON格式的数据源 reader: { type: 'json', rootProperty: 'nodes' // JSON数据...
动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...
TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要配置项**: - **root**: 这个配置项定义了树的根节点。通常是一个包含...
4. **面板切换**:在事件处理器中,可以使用`Ext.getCmp()`方法获取另一个TreePanel的引用,然后根据需求调整其可见性(`hidden`属性)或者使用`setActiveItem()`方法在容器(如TabPanel或Viewport)中切换显示的...
4. 使用`load`方法或通过`expandNode`、`collapseNode`等方法来控制节点的加载和折叠状态。 综上所述,EXTJS4中的Panel的accordion布局和TreePanel的动态导航是两种强大而灵活的功能,能够帮助开发者构建出丰富多样...
ExtJs TreePanel是一种在Web应用程序中用于展示层次结构数据的强大组件。它被广泛应用于构建具有树状结构的导航菜单、文件系统目录...通过熟练掌握TreePanel的使用,可以极大地提升Web应用程序的用户界面质量和功能性。
6. **common.js**:通用函数库,提供了跨页面可重用的函数,比如工具方法或数据处理函数。 7. **img**:图片文件夹,通常包含树节点的图标和其他视觉元素,如展开/折叠箭头,复选框图标等。 在大数据量场景下,一...
根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...
在本文中,我们将深入探讨如何在ExtJS的TreePanel组件中实现动态加载数据。TreePanel是ExtJS库中的一个功能强大的组件,它允许用户以树形结构展示数据。动态加载数据是一种优化用户体验的方法,只有当用户展开节点时...
在处理全选和清空时,我们需要遍历TreePanel的节点,并使用`toggleCheck`方法改变CheckBox的视觉状态,同时更新节点的`checked`属性,以保持数据和视图的一致性。这样的设计允许用户在复杂的数据结构中方便地进行...