1.创建一个简单(静态)的树
/**
创建一个简单(静态)的树
*/
function createSimpleTreePanel(){
//因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
width: 300,
height: 200,
root: vRoot
});
}
2.创建异步简单树
/**
创建异步简单树
*/
function createSimpleTreeLoader(){
//创建一个由treeLoader.js定义的节点结构[{...},{...}]
var vNode = new Ext.tree.TreeLoader({url:'../js/treeLoader.js'});
//创建一个根节点,将上面定义的子节点结构与根节点绑定.
var vRoot = new Ext.tree.AsyncTreeNode({text: '根节点',loader: vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
width: 300,
height: 200,
root: vRoot//绑定根节点.
});
}
3.创建动态(从JSP文件动态载入)树
/**
创建动态(从JSP文件动态载入)树
*/
function createSimpleDynamicTreeLoader(){
//创建一个节点,节点的结构由JSP文件提供
var vNode = new Ext.tree.TreeLoader({url:'treeLoader.jsp'});
//为该节点添加beforeload(点击节点之前触发)事件监听器.
vNode.on("beforeload",function(myLoader,node){
//myLoader.baseParams.parentId是为treeLoader.jsp传递参数,参数名为parentId,可以自己取名.node代表正要点击的节点对象
myLoader.baseParams.parentId = node.id=='root'?"":node.text;
}) ;
var vRoot = new Ext.tree.AsyncTreeNode({id: 'root',text: '根节点',loader: vNode}) ;
var vTree = new Ext.tree.TreePanel({//创建一个用于装载树的面板
renderTo: document.body,//绑定在body元素上.
width: 300,
height: 200,
root: vRoot//绑定根节点.
});
}
4.用到的文件 treeLoader.js
[{text:'子节点1'},{text:'子节点2',leaf:true}]
5.用到的文件 treeLoader.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String parentId = request.getParameter("parentId") ;
System.out.println(parentId) ;
if("".equals(parentId) || parentId==null){
out.print("[{text:\'北京\'},"+"{text:'辽宁'}]");
}else if("北京".equals(parentId)){
out.print("[{text: \'朝阳\',leaf: true},"+"{text: '东城',leaf: true}]");
}else if("辽宁".equals(parentId)){
out.print("[{text: \'沈阳\',leaf: true},"+"{text: '大连',leaf: true}]");
}
%>
6.载入
//Ext.onReady(createSimpleTreePanel);//创建一个简单(静态)的树
//Ext.onReady(createSimpleTreeLoader);//创建异步简单树
Ext.onReady(createSimpleDynamicTreeLoader);//创建动态树
分享到:
相关推荐
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
本文为大家介绍下extjs4 treepanel如何动态改变行高度,下面有个不错的示例,感兴趣的朋友可以参考下
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
ExtJs TreePanel应用ExtJs TreePanel应用
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
简单Extjs动态树" collapsible : true enableDD : true enableDrag : true rootVisible : true autoScroll : true autoHeight : true width : 150 lines : true } ;">extjs实现简单的树状结构...
TreePanel的各项属性能帮助我们动态加载extjs tree
代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用