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