`
ll_feng
  • 浏览: 389431 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[extjs] 三态树的使用实例

    博客分类:
  • ajax
 
阅读更多
以下通过一个工作实例,来说明怎么使用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与.NET结合开发实例

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    页面组件示例中心可能包含了一系列EXTJS3.0的组件演示,包括树形组件的实例,你可以通过这些实例学习如何在实际项目中使用和定制EXTJS3.0的树组件,提升你的前端开发能力。 总结来说,EXTJS3.0的树形组件提供了一种...

    ExtJS5.0 树形菜单实例

    下面我们将深入探讨如何利用ExtJS 5.0 创建一个树形菜单实例。 1. **TreePanel 基础** TreePanel 是ExtJS 中用于展示树状数据的组件,它允许用户展开和折叠节点,进行选择和编辑操作。创建一个TreePanel 需要定义...

    ExtJs 学习实例

    ExtJs学习实例ExtJs学习实例ExtJs学习实例

    extjs实现动态树

    3. 节点模型:每个树节点都是一个`Ext.data.Model`实例,包含节点属性如id、text、leaf等。 4. 数据绑定:使用`store`属性与数据源进行绑定,通过监听`load`事件实现异步加载。 二、动态加载 1. `rootVisible`:...

    ExtJs入门实例(内含N个实例源码)

    ExtJS入门实例、包含各种详细代码,非常适合初学者学习

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    EXTJS 4 树形表格组件使用示例

    在实际应用中,我们可以通过以下步骤来使用EXTJS 4的树形表格组件: 1. **创建Store**:定义一个Store对象,配置数据源和模型,用于存储和管理数据。 2. **定义Model**:定义树形表格的数据模型,包括字段名和...

    EXTJS 树的实例

    在这个“EXTJS 树的实例”中,我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** EXTJS的树由一系列可扩展的树节点组成,每个节点都可以有子节点,形成层次结构。树组件提供了丰富的功能,包括...

    springmvc+extjs4实例树

    标题中的“springmvc+extjs4实例树”指的是一个结合了SpringMVC和ExtJS4技术的实战项目,主要用于创建一个具有树形结构的用户界面。这个项目可能用于展示层次结构的数据,例如组织架构、文件系统或者数据库的分类...

    ExtJS源码分析与开发实例宝典

    资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...

    ExtJS源码分析与开发实例宝典4.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典2.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典0.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典1.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    EXTJS简单MVC实例

    只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载

    Extjs 动态加载树

    标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...

Global site tag (gtag.js) - Google Analytics