sdbrk的gravatar头像
sdbrk2014-04-16 11:04:37

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

extjs版本: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');

});


最代码官方编辑于2016-4-30 10:21:37


打赏

顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友