ext2下拉树选项框comboxWithTree(支持异步加载子节点)

ext版本:2.2

简介:支持单选、异步加载子节点(当然一下子拼接好全部节点的json也是绝对没问题的),要支持多选则需要自行设置,(已测试通过)浏览器兼容ie8、谷歌、FF。

资料参考:搜索一下“ext2 下拉树”,应该有一大堆内容代码介绍完全一样的博文,下面代码就是取自那堆“原创”的博文,不能说明出处,望原作者见谅。本代码在那个基础上有较好的修改:1、修改tree的lorder使tree支持异步加载子节点;2、使下拉树由多选转为单选。

代码如下:

//区域下拉树(ext2)
	var comboxWithTree = new Ext.form.ComboBox({    
	    fieldLabel:'区域',  
	    id:'zonename', //hiddenName:'zonename',
	    displayField:'code',valueField:'value',mode:'local',  
	    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),     
	    editable:false,     
	    shadow:false,     
	    triggerAction:'all',     
	    maxHeight: 200,   
	    anchor:'98%',
	    tpl:"<div style='height:200px'><div id='tree4combox'></div></div>"
	  });  
	var treelorder =  new Ext.tree.TreeLoader({ 
		dataUrl : fullpath+'/systemextend/UserZoneAction!listUserZoneTree4combo.do'
	});
	treelorder.on("beforeload",function(treeloader,node){ treelorder.baseParams.comboTreeid = node.attributes.id; },treelorder); 
	var tree4combox = new Ext.tree.TreePanel({  
	    border : true,  
	    rootVisible : true,  
	    root : {
	        text:'全国',
			id:'-1',
			expanded : true
	    },
	    loader : treelorder
	});  
	tree4combox.on('click',function(node){     //点击选中
		comboxWithTree.setValue(node.text);  
		comboxWithTree.collapse();  
	});     
	tree4combox.on('checkchange',function(node,checked ){  //勾选复选框选中并清空复选框
		if(checked==true){
			node.getUI().toggleCheck(false); 
		    comboxWithTree.setValue(node.text); 
			comboxWithTree.collapse();   
		}
	});
	comboxWithTree.on('expand',function(){     
	    tree4combox.render('tree4combox');     
	});

由于该下拉树是基于ext2的,对于ext3应该可以兼容过去,但是要在ext4上使用恐怕要阔斧大刀。ext4的下拉树控件可参考我的另一篇文章,贴上地址:

http://blog.youkuaiyun.com/seedingly/article/details/19168721

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值