EXT JS4.0树的生成和加载与EXT3.0相比做了比较大的改动,层次比较分明,先是加载TreeStore,然后加载TreePanel,并把TreeStore的值传给TreePanel。但是这种加载方式没有Ext Js3.0的加载方式灵活,监听起来也没那么方便。早段时间做了个从后台传值并生成动态树的功能,给大家参考参考。
前端js代码:
//创建静态树
function createXxTrees(){
var xxMenuArr = [{
text: "XXX管理",
expanded: false,
iconCls:"leftMenuIcon",
icon:"images/node/utcs/folder.jpg",
children: [{
text: "服务器管理",
iconCls:"leftMenuIcon",
icon:"images/node/utcs/bianji.png",
leaf: true
},{
text: "域管理",
iconCls:"leftMenuIcon",
icon:"images/node/utcs/bianji.png",
leaf: true
},{
text: "节点管理",
iconCls:"leftMenuIcon",
icon:"images/node/utcs/bianji.png",
leaf: true
}
]
}
];
//动态树生成
Ext.Ajax.request({
url : 'XxTreeAction.action',
//params : {},
success : function(response,returnValue)
{
var info = Ext.JSON.decode(response.responseText);
var nodes = info.nodes;
if(info.success){
var nodeRoot = {
text:"信号节点",
expanded: true,
iconCls:"leftMenuIcon",
icon:"images/node/utcs/folder.jpg",
children: nodes
}
xxMenuArr.push(nodeRoot);
}
},
failure : function(response)
{
},
async: false
});
xxTreeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: xxMenuArr
}
});
//显示树
if (Ext.getCmp(' xxTreePanel ') == null ) {
Ext.create('Ext.tree.Panel', {
id: 'xxTreePanel',
width: leftMenuWidth,
height: leftMenuHeight,
store: xxTreeStore ,
rootVisible: false,
renderTo: "xxDivId",//HTML的DIV Id
listeners: {
itemclick: function(view, record, element, index){
}
}
});
}
}
后台XxTreeAction execute方法代码:
public String execute() throws Exception
{
List<TreeNode> serverTreeList = new ArrayList<TreeNode>();//服务器树节点列表
List<TreeNode> childrenTreeList = new ArrayList<TreeNode>();
try {
List<KkServerInfo> serverInfoList = serverService.findAll();
//遍历服务器
for(int i=0;i<serverInfoList.size();i++){
KkServerInfo serverInfo = serverInfoList.get(i);
long serverId = serverInfo.getId();
//设置服务器属性
TreeNode serverTreeNode = new TreeNode();
serverTreeNode.setText(serverInfo.getKkServerName());
serverTreeNode.setId("s#"+serverInfo.getId());
serverTreeNode.setCls("");
serverTreeNode.setIconCls("leftMenuIcon");
serverTreeNode.setIcon("images/node/utcs/server.jpg");
serverTreeNode.setExpanded(true);
//定义域的树节点
List<TreeNode> areaTreaNodeList = new ArrayList<TreeNode>();
List<KkDomain> areaInfoList = areaService.selectKkAreaListByServerId(serverId);
//遍历域
for(int j=0;j<areaInfoList.size();j++){
KkDomain areaInfo = areaInfoList.get(j);
long areaId = areaInfo.getId();
//设置域节点属性
TreeNode areaTreeNode = new TreeNode();
areaTreeNode.setText(areaInfo.getName());
areaTreeNode.setId("a#"+areaInfo.getId());
areaTreeNode.setCls("");
areaTreeNode.setIconCls("leftMenuIcon");
areaTreeNode.setIcon("images/node/utcs/yu.jpg");
areaTreeNode.setExpanded(false);
//定义节点的树节点
List<TreeNode> nodeTreeNodeList = new ArrayList<TreeNode>();
List<KkInfo> nodeInfoList = nodeService.selectKkInfoListByAreaId(areaId);
//遍历节点
for(int m=0;m<nodeInfoList.size();m++){
KkInfo nodeInfo = nodeInfoList.get(m);
//设置节点属性
TreeNode nodeTreeNode = new TreeNode();
nodeTreeNode.setText(nodeInfo.getAddress());
nodeTreeNode.setId("n#"+nodeInfo.getId());
nodeTreeNode.setCls("");
nodeTreeNode.setLeaf(true);
nodeTreeNode.setIconCls("leftMenuIcon");
nodeTreeNode.setIcon("images/node/kkcs/kkcs.png");
nodeTreeNode.setChildren(childrenTreeList);
nodeTreeNodeList.add(nodeTreeNode);
}//end 遍历节点
areaTreeNode.setChildren(nodeTreeNodeList);
areaTreaNodeList.add(areaTreeNode);//添加域节点
}//end 遍历域
serverTreeNode.setChildren(areaTreaNodeList);
serverTreeList.add(serverTreeNode);
}//end 遍历服务器
success = true;
} catch (Exception e) {
e.printStackTrace();
success = false;
}
this.nodes = serverTreeList;
return SUCCESS;
}
NodeTree.java类:(封装了TreeStore 中树节点的属性)
import java.util.List;
/**
* 动态树节点类
* @author 林
*
*/
public class TreeNode {
private String text;
private String id;
private String cls;
private boolean expanded;
private String iconCls;
private String icon;
private String href;
private boolean leaf;
private List<TreeNode> children;
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getHref() {
return href;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public void setHref(String href) {
this.href = href;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
public boolean isExpanded() {
return expanded;
}
public void setExpanded(boolean expanded) {
this.expanded = expanded;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
}
分享到:
相关推荐
在“EXT2.0动态树,分页!”这个项目中,我们可以看到EXT2.0如何被用来创建一个后台管理系统的动态树结构,并结合了分页功能,以提高用户体验和系统性能。 动态树结构是EXT2.0中的一个重要特性,它允许用户交互地...
在提供的`动态树例子json`文件中,可能包含了上述提到的JSON数据结构,用于演示EXT如何处理动态树及各种操作。通过实际代码示例,我们可以更深入地理解EXT动态树的操作方式。在实践中,结合EXT的API文档和示例代码,...
在"EXT动态树工程,例子学习"中,我们将关注EXT中的一个重要组件——动态树。 动态树是一种数据可视化工具,它允许用户以树状结构展示数据。在EXT中,动态树常用于展示层级关系的数据,如文件系统、组织结构或者...
Ext动态树是基于Ext JS库的一个组件,用于创建交互式的、可动态更新的树形结构。这个组件在Web应用程序中非常有用,特别是在需要展示层级数据或者进行导航菜单设计时。Ext中文API为开发者提供了详细的使用指南和参考...
在描述中提到的“不错的下拉树,异步加载树节点”意味着这个组件具有高级功能,如动态、按需加载数据。在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而...
在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...
在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext动态树。 首先,我们需要理解ExtJS中的树组件(TreePanel)。树组件提供了一种直观的方式来展示层次化的数据,它能够通过异步加载节点来优化性能。...
其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...
在EXT中,实现树形菜单主要依赖于`Ext.tree.Panel`组件,这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素,通常用于表示文件系统、组织结构或导航菜单。在EXT中,`...
EXT.tree动态树是EXT JS中的一个核心组件,用于显示层次结构的数据。它支持多种功能,如展开/折叠节点、拖放操作、节点选择等。EXT.tree动态树的创建通常涉及以下步骤: 1. 引入EXT库:在HTML文件(如index.html)...
4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...
在Ext中,"动态树"是指能够根据需求实时生成或更新的树形结构组件。这种组件在数据管理、目录结构展示、层级关系表示等方面非常有用。下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树...
4. 在页面上渲染树。 下面是一个简单的Ext树的例子代码片段,演示了如何创建一个基本的树: ```javascript Ext.application({ name: 'MyApp', launch: function () { // 加载数据源,这里假设tree1.txt是一个...
EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...
Ext4.2可增删树例子是一个针对Ext框架的扩展,特别优化了对树形结构进行动态添加和删除节点的功能。在传统的Ext中,一旦树结构建立,其leaf属性(表示节点是否为叶子节点)通常是静态的,不易于在运行时进行修改。...
5. **数据绑定**:树形控件的数据通常是动态加载的,EXT使用Store来管理这些数据,可以与服务器进行异步通信,更新或获取树的结构和状态。 6. **自定义渲染**:EXT允许开发者自定义节点的显示样式和行为,比如通过...
EXT文件系统家族是Linux系统中最常见的默认文件系统,每个版本都在前一个的基础上进行了改进和增强,如EXT3引入了日志记录功能,EXT4则进一步优化了性能和扩展性。 【压缩包子文件的文件名称列表】:tree1.jsp、js ...
在实际应用中,我们经常需要将 Ext.js 与后端框架如 Spring 进行集成,以实现动态加载树结构数据的功能。下面的示例展示了如何使用 Spring MVC 和 Hibernate 实现这一点。 ```javascript var TreeTest = function ...
在IT领域,EXT是一个流行的JavaScript库,用于构建富客户端应用程序,尤其在Web应用开发中广泛应用。...通过这种方式,你可以构建一个动态、交互性强的EXT树控件,有效地展示和操作数据库中的层次结构数据。
4. **TreeStore**: TreeStore是专门用于树形数据的存储类,负责管理数据的加载、更新和排序。你需要定义TreeStore的model类型,并提供数据源。数据可以通过配置store的root属性来指定树的根节点。 5. **渲染和模板*...