以下通过一个工作实例,来说明怎么使用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实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
ExtJs入门实例ExtJs入门实例ExtJs入门实例
ExtJs学习实例ExtJs学习实例ExtJs学习实例
extjs实现动态树
ExtJS4下拉树组件 ExtJS4下拉树组件
ExtJS入门实例、包含各种详细代码,非常适合初学者学习
ExtJS3.0 源码分析与开发实例宝典
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
springmvc+extjs4实例树
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
引用ExtJS5.0 实现一个树形菜单的后台管理demo
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
ExtJs 实例+ExtJs中文教程 大量ExtJs的实例和目前最好的ExtJs中文教程,学习ExtJs的朋友可以参考一下
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
这是Extjs的树实例,主要展现的是EXTJS树的基本制作。大家可能下载去看看啊!很不错的……
extjs实现动态树加载菜单