[extjs] 三态树的使用实例
以下通过一个工作实例，来说明怎么使用extjs的三态树。
一、需求描述：
在一个iframe中嵌入一个页面，这个页面在要创建一颗地区的三态树。在用户选择后，系统要从这个iframe中获到选择的结果。
二、构建三态树
1、area.js
2、模拟数据 ：data.json
3、在页面里使用树：area.jsp
三、调用代码：
一、需求描述：
在一个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;