【叨、校长】Ext 下拉树插件_ComboTree_xz

程序员文章站 2022-05-18 20:49:41

...

本插件继承于ComboBox！通俗易懂、老少皆宜、不论男女！---叨、校长

由于网上找的插件大多都有bug，特别自己重写了一个，简单实用！

详细说明，与使用范例请看插件注释！

/**
 * @description 基于Ext3.4版本实现的（其他版本或许支持，未测！）一个多选下拉树插件！
 * 				实现功能：1、多选节点！
 * 						 2、自动选中下拉框中已有的节点！
 * 						 3、自动将树节点TEXT赋值给插件的显示值(setValue())!
 * @author 叨、校长灬
 * @example 参数nodes example:"[{text:'第一',leaf:true,checked:false},{text:'第二',leaf:true,checked:false},{text:'第三',leaf:true,checked:false},{text:'第四',leaf:true,checked:false}]"
 * 			支持一切动态树加载方式！
 * 			{
					xtype:"xz_combotree",
					tree:new Ext.tree.TreePanel({
						root: new Ext.tree.AsyncTreeNode({
				        	text:'root',
				            expanded: true,
				            children:Ext.decode(nodes)
				        }),
						autoScroll:true,
						rootVisible:false
					})
				}
 */
Ext.namespace("Ext.daoXz");

Ext.daoXz.ComboBoxTree= Ext.extend(Ext.form.ComboBox,{
	store : new Ext.data.SimpleStore({ 
        fields : [], 
        data : [[]] 
    }), 
    mode : 'local',
    triggerAction : 'all', 
    maxHeight : 200, 
    selectedClass : '', 
    onSelect : Ext.emptyFn, 
	initComponent:function(){
		Ext.daoXz.ComboBoxTree.superclass.initComponent.call(this); 
		var _this=this;
		var userH=this.tree.treeHeight;
		var xzH=this.maxHeight;
		var myHeight=userH>xzH?xzH:userH;
        this.tplId = Ext.id(); 
        this.tpl = '<div id="' + this.tplId + '" style="height:'+myHeight+';";overflow:auto;"></div>'; 
        this.tree.on("checkchange",this.changeValue,this);
        this.tree.on("beforeappend",this.renderNodeCheckedStates,this);
	},
	
	//重写onViewClick方法，阻止下拉树点击时自动关闭！
	onViewClick : function(doFocus) { 
		var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
		if (r) { 
			this.onSelect(r, index); 
		} else if (s.getCount() === 0) { 
			this.collapse(); 
		} 
		if (doFocus !== false) { 
			this.el.focus(); 
		} 
	},
	//监听下拉框expand事件，渲染treepanel
	listeners:{
		"expand":{
			fn:function(){
				if (!this.tree.rendered && this.tplId) { 
					this.tree.render(this.tplId);
                } 
                this.tree.render(this.tplId);
			},
			single:true
		}
	},
	//对插件设置显示值！
	setShowValue:function(val,checked){
		var temp=this.getValue();
		var allValue="";
		if(checked){
			if(temp==""){
				allValue=val;
			}else{
				allValue=temp+","+val;
			}
		}else{
			allValue=val;
		}
		//调用父类方法
		this.setValue(allValue);
	},
	//树节点checked事件的实现，对插件进行赋值和清除已选的值！
	changeValue:function(node,checked){
		var text=node.text;
		if(checked){
			this.setShowValue(text,checked);
		}else{
			var s=this.getValue();
			var r=this.getRawValue();
			if(s.indexOf(text)==0&&s.indexOf(",")==-1){
				s=s.replace(text,"");
			}else if(s.indexOf(text)==0&&s.indexOf(",")!=-1){
				s=s.replace(text+",","");
			}else{
				s=s.replace(","+text,"");
			}
			this.setShowValue(s,checked);
		}
	},
	
	//自动选中已经赋值的节点！
	renderNodeCheckedStates:function(tree,pnode,node){
		var text=this.getValue();
		var array=text.split(",");
		var size=array.length;
		for(var i=0;i<size;i++){
			if(array[i]==node.text){
				node.attributes.checked=true;
			}
		}
	}
})

Ext.reg('xz_combotree', Ext.daoXz.ComboBoxTree);

实例JSP：<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'index.jsp' starting page</title>
		<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css">
		<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="extjs/ext-all.js"></script>
		<script type="text/javascript" src="js/ComboTree_xz.js"></script>
		<script type="text/javascript">
		Ext.onReady(function() {
			///var nodes="[{text:'第一',id:'first',leaf:true,checked:false},{text:'第二',id:'second',leaf:true,checked:false},{text:'第三',id:'third',leaf:true,checked:false},{text:'第四',id:'fouth',leaf:true,checked:false}]";
			var nodes="[";
			for(var i=0;i<20;i++){
				if(i!=19){
					nodes+="{text:'第"+i+"',leaf:true,checked:false},";
				}else{
					nodes+="{text:'第"+i+"',leaf:true,checked:false}";
				}
			}
			nodes+="]";
			new Ext.Window({
				width:300,
				height:400,
				items:[{
					xtype:"xz_combotree",
					id:"myCombo",
					value:"第0,第10",
					tree:new Ext.tree.TreePanel({
						root: new Ext.tree.AsyncTreeNode({
				        	text:'root',
				            expanded: true,
				            children:Ext.decode(nodes)
				        }),
						autoScroll:true,
						rootVisible:false
					})
				},{
					xtype:"button",
					handler:function(){
						alert(Ext.getCmp("myCombo").getValue());
						alert(Ext.getCmp("myCombo").getRawValue());
					}
				}]
			}).show();
		});
		</script>
	</head>
	<body>
		<div id="column-group-grid"></div>
	</body>
</html>