`

TreePanel的使用方法

阅读更多

 

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 完整

    通过上述方式,`TreePanel`和`TabPanel`的结合可以构建出强大且易于使用的界面,满足用户对层次结构数据的探索和多视图内容的切换需求。在实际开发中,可以根据具体业务需求进行定制,优化用户体验。

    Ext TreePanel Checked Ext复选框树

    当节点的复选框状态改变时,可以使用`Store`的`sync()`方法将更改同步回服务器。 8. **自定义渲染**:开发者还可以通过重写`TreePanel`的模板或使用`renderer`配置来自定义复选框的显示方式,以满足特定的UI需求。 ...

    用coolite布局,数据库绑定Treepanel,用Tabpanel显示

    在本文中,我们将深入探讨如何使用Coolite布局技术,结合数据库数据绑定到TreePanel,并利用TabPanel进行动态展示。Coolite是一种强大的前端开发框架,它提供了丰富的组件和灵活的布局方式,使得创建复杂的Web应用...

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    在处理TreePanel时,我们可能会遇到一个常见问题:当尝试使用MultiSelectionModel(多选模型)重置选中的节点时,发现重置操作并未生效。这个问题可能源于多种原因,本文将深入探讨这个问题及其解决方案。 首先,...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    另外一种获取被选中节点的方法是使用`getChecked`函数,该函数返回TreePanel中所有被选中的节点数组。我们可以通过遍历这些节点来收集叶子节点的ID。 ```javascript function getTreeCheckedValue() { var ...

    Ext.net TreePanel的Checkbox操作及父子联动

    - JavaScript部分,可能包含了`Ext.create`或`Ext.extend`方法来创建自定义的TreePanel类,并设置了上述提到的属性。 - 服务器端代码可能处理数据源,如填充TreePanel的节点数据,并可能与CheckBoxModel的配置交互...

    TreePanel基本使用

    使用`proxy`配置项定义数据源,`load`方法用于异步加载: ```javascript proxy: { type: 'ajax', url: 'tree_data.json', // JSON格式的数据源 reader: { type: 'json', rootProperty: 'nodes' // JSON数据...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    动态加载本地数据到`Ext.Panel`通常涉及到异步请求,使用`Ajax`或`Store`的`load`方法,通过URL获取JSON或XML格式的数据,并将其渲染到面板内。 例如: ```javascript var panel = Ext.create('Ext.Panel', { ...

    extjs TreePanel

    TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要配置项**: - **root**: 这个配置项定义了树的根节点。通常是一个包含...

    2个treepanel相互切换

    4. **面板切换**:在事件处理器中,可以使用`Ext.getCmp()`方法获取另一个TreePanel的引用,然后根据需求调整其可见性(`hidden`属性)或者使用`setActiveItem()`方法在容器(如TabPanel或Viewport)中切换显示的...

    extjs4中panel的accordion布局以及treepanel导航

    4. 使用`load`方法或通过`expandNode`、`collapseNode`等方法来控制节点的加载和折叠状态。 综上所述,EXTJS4中的Panel的accordion布局和TreePanel的动态导航是两种强大而灵活的功能,能够帮助开发者构建出丰富多样...

    ExtJs TreePanel应用

    ExtJs TreePanel是一种在Web应用程序中用于展示层次结构数据的强大组件。它被广泛应用于构建具有树状结构的导航菜单、文件系统目录...通过熟练掌握TreePanel的使用,可以极大地提升Web应用程序的用户界面质量和功能性。

    TreePanel-test.0.2.rar

    6. **common.js**:通用函数库,提供了跨页面可重用的函数,比如工具方法或数据处理函数。 7. **img**:图片文件夹,通常包含树节点的图标和其他视觉元素,如展开/折叠箭头,复选框图标等。 在大数据量场景下,一...

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键概念和技术要点: ### 1. 创建TreeStore实例 ...

    treepanel动态加载数据实现代码

    在本文中,我们将深入探讨如何在ExtJS的TreePanel组件中实现动态加载数据。TreePanel是ExtJS库中的一个功能强大的组件,它允许用户以树形结构展示数据。动态加载数据是一种优化用户体验的方法,只有当用户展开节点时...

    extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    在处理全选和清空时,我们需要遍历TreePanel的节点,并使用`toggleCheck`方法改变CheckBox的视觉状态,同时更新节点的`checked`属性,以保持数据和视图的一致性。这样的设计允许用户在复杂的数据结构中方便地进行...

Global site tag (gtag.js) - Google Analytics