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

extjs版本：2.2

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

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

代码如下：

01	/区域下拉树(ext2)

02

03	var comboxWithTree = new Ext.form.ComboBox({

04

05	fieldLabel:'区域',

06

07	id:'zonename', //hiddenName:'zonename',

08

09	displayField:'code',valueField:'value',mode:'local',

10

11	store:new Ext.data.SimpleStore({fields:[],data:[[]]}),

12

13	editable:false,

14

15	shadow:false,

16

17	triggerAction:'all',

18

19	maxHeight: 200,

20

21	anchor:'98%',

22

23	tpl:"<div style='height:200px'><div id='tree4combox'></div></div>"

24

25

});

26

27	var treelorder =  new Ext.tree.TreeLoader({

28

29	dataUrl : fullpath+'/systemextend/UserZoneAction!listUserZoneTree4combo.do'

30

31

});

32

33	treelorder.on("beforeload",function(treeloader,node){ treelorder.baseParams.comboTreeid = node.attributes.id; },treelorder);

34

35	var tree4combox = new Ext.tree.TreePanel({

36

37	border : true,

38

39	rootVisible : true,

40

41

root : {

42

43	text:'全国',

44

45

id:'-1',

46

47	expanded : true

48

49

},

50

51	loader : treelorder

52

53

});

54

55	tree4combox.on('click',function(node){ //点击选中

56

57	comboxWithTree.setValue(node.text);

58

59	comboxWithTree.collapse();

60

61

});

62

63	tree4combox.on('checkchange',function(node,checked ){ //勾选复选框选中并清空复选框

64

65	if(checked==true){

66

67	node.getUI().toggleCheck(false);

68

69	comboxWithTree.setValue(node.text);

70

71	comboxWithTree.collapse();

72

73

}

74

75

});

76

77	comboxWithTree.on('expand',function(){

78

79	tree4combox.render('tree4combox');

80

81

});