以下通过一个工作实例，来说明怎么使用extjs的三态树。
一、需求描述：
在一个iframe中嵌入一个页面，这个页面在要创建一颗地区的三态树。在用户选择后，系统要从这个iframe中获到选择的结果。
二、构建三态树
1、area.js
Ext.namespace("send.comp");
/**
* 切换非GIS方式进行区域标绘的树
* @author 吕凌峰
*/
AreaTreePanel = function() {
//已标绘区域的数据对象，用来存储调用者所需的数据（这里根据实际情况来设计）
this.areaInfo = function(){
area = ""; //所有被选择区域的名称字符串，如：“离石区，水文县,交城县
areaid = ""; //所有被选择区域的区域代码串，如：”11101,11102,11103“
};
AreaTreePanel.superclass.constructor.call(this, {
id : 'send-comp-areatree',
border : false,
autoScroll : true,
animate : true,
autoWidth : true,
enableDD : false,
containerScroll : true,
isload : false,
checkModel : 'cascade',
onlyLeafCheckable : false,
animate : false,
rootVisible : false,
autoScroll : true,
loader : new Ext.tree.TreeLoader({
//dataUrl : rootPath + '/lead/lead_showPersonTree.action',
dataUrl : rootPath+'/contents/forecattwarn/weather/js/data2.json',
/*baseParams : {
isShowPerson : true,
isCheck : '1',
fwid : 'c564f546d48000016ce51d4213be8f40',
orgcode : themis.commonjs.org.orgCode
},*/
listeners : {
beforeload : function(loader, node) {
// if (releasetype == 'pt_01') {
// loader.baseParams.releasetype = 'pm_08';
// }
},
load : function(loader, node, response) {
node.expandChildNodes(true);// 展开所有的子节点
node.collapseChildNodes(true);// 收回所有的子节点
}
},
baseAttrs : {
uiProvider : Ext.ux.TreeCheckNodeUI
}
}),
root : new Ext.tree.AsyncTreeNode({
id : 'root',
iconCls : 'icon-root',
text : '行政区域',
expanded : true
}),
listeners : {
load : function() {
isload = true;
},
beforeload : function() {
isload = false;
},
beforeappend : function(tree, parent, node) {
}
}
})
}
/**
* 对树对象进行功能扩展，添加适用的方法
* @class AreaTreePanel
* @extends Ext.tree.TreePanel
*/
Ext.extend(AreaTreePanel, Ext.tree.TreePanel, {
initLeader : function() {
},
/**
*
* @param {} a
* @param {} startNode
* @return {} 返回节点对象数组，若子节点已全选则只返回父节点，若只有部分子节点被选择，则返回被选的子节点
*/
getChecked : function(a, startNode) {
startNode = startNode || this.root;
var r = [];
var f = function() {
if (this.attributes.checked == 'all') {
r.push(!a ? this : (a == 'id' ? this.getDepth() + '-' + this.id : this.attributes[a]));
return false;
}
};
startNode.cascade(f);
return r;
},
/**
* 获取区域树中被用户选择的区域信息
* 基于getChecked(),封装成调用者所需的数据
*/
getAreaDatas : function(){
var info = this.areaInfo;
var aNodes = this.getChecked();
var names = "";
var codes = "";
Ext.each(aNodes,function(node){
names+=node.text+",";
codes+=node.id+",";
})
info.area = names.indexOf(",") == -1 ? names : names.substring(0,names.length - 1);
info.areaid = codes.indexOf(",") == -1 ? codes : codes.substring(0,codes.length - 1);
return info;
}
});
2、模拟数据 ：data.json
[{
id:'141100',
text:'吕梁市',
children:[{
id:'141101',
text:'离石区',
leaf:false,
checked:'all',
iconCls:'icon-user',
children:[{
id:'11001',
text:'东庄乡',
leaf:true
},{
id:'11002',
text:'西庄乡',
leaf:true
}]
},{
id:'141121',
text:'文水县',
children:[],
leaf:true,
checked:'all',
iconCls:'icon-user'
},{
id:'141122',
text:'交城县',
children:[],
leaf:true,
checked:'all',
iconCls:'icon-user'
},{
id:'141123',
text:'兴县',
children:[],
leaf:true,
checked:'all',
iconCls:'icon-user'
}],
leaf:false,
checked:'all',
iconCls:'icon-organize'
}]
3、在页面里使用树：area.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/include/commonCss.jsp" %>
<%@ include file="/include/ext/base.jsp" %>
<%@ include file="/include/commonJs.jsp" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/contents/commons/js/TreeCheckNodeUI.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/contents/forecattwarn/weather/js/area.js"></script>
<script type="text/javascript" >
var tree = new AreaTreePanel();
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout : 'border',
items : [{
region:'center',
title:'',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
items: [{
title:'请选择影响区域',
border:false,
items:tree
}]
}]
});
});
</script>
</head>
<body>
</body>
</html>
三、调用代码：
var tree = gisframe.window.tree;
var data = tree.getAreaDatas();
return data;
分享到：
相关推荐
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
ExtJS 4 下拉树（TreeCombo）是一种组合控件，它将传统的下拉框与树形结构结合在一起，提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用，例如在需要用户选择分类或者层级结构的场景中...
页面组件示例中心可能包含了一系列EXTJS3.0的组件演示，包括树形组件的实例，你可以通过这些实例学习如何在实际项目中使用和定制EXTJS3.0的树组件，提升你的前端开发能力。 总结来说，EXTJS3.0的树形组件提供了一种...
下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件，它允许用户展开和折叠节点，进行选择和编辑操作。创建一个TreePanel 需要定义...
ExtJs学习实例ExtJs学习实例ExtJs学习实例
3. 节点模型：每个树节点都是一个`Ext.data.Model`实例，包含节点属性如id、text、leaf等。 4. 数据绑定：使用`store`属性与数据源进行绑定，通过监听`load`事件实现异步加载。 二、动态加载 1. `rootVisible`：...
ExtJS入门实例、包含各种详细代码，非常适合初学者学习
ExtJS3.0 源码分析与开发实例宝典
ExtJs4.2没有直接提供下拉树这个组件，但是有例子可以用，文件位置：ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧：默认显示了根节点；达到最小高度时再展开节点，高度不能自动调整。 所以我做了一...
在实际应用中，我们可以通过以下步骤来使用EXTJS 4的树形表格组件： 1. **创建Store**：定义一个Store对象，配置数据源和模型，用于存储和管理数据。 2. **定义Model**：定义树形表格的数据模型，包括字段名和...
在这个“EXTJS 树的实例”中，我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** EXTJS的树由一系列可扩展的树节点组成，每个节点都可以有子节点，形成层次结构。树组件提供了丰富的功能，包括...
标题中的“springmvc+extjs4实例树”指的是一个结合了SpringMVC和ExtJS4技术的实战项目，主要用于创建一个具有树形结构的用户界面。这个项目可能用于展示层次结构的数据，例如组织架构、文件系统或者数据库的分类...
资源名称：Ext JS源码分析与开发实例宝典内容简介：本书全面系统地剖析了ExtJS 3．0的架构设计原理。通过对源码的“抽丝剥茧”，读者可以掌握Ext JS架构的精妙，从原理层面用活Ext JS。此外，本书还提出了大量的解决...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本，是本人花钱买来的，所以分享给大家，希望大家喜欢，由于本人一次只能上传60M大的文件(试了好多次，每次都上传到99%就不动了，还以为csdn在后台审核内容呢，害我电脑...
在ExtJS中，"下拉多选树"（Combobox Tree）是一种结合了下拉框和树形结构的组件，它允许用户在下拉菜单中选择多个树节点，提供了一种高效且直观的用户交互方式。 1. **下拉树组件**：在ExtJS中，树形组件...
只要将解压的文件直接放置到myeclipse的webroot下面，启动tomcat访问。简单的EXTJS mvc框架，设计 store，model，controller,view,window等等，同时展示了一些基本的点击显示、修改等等操作，需要的同学自行下载
标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题，主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库，常用于开发富客户端应用。动态加载树（Dynamic ...