带CheckBox的 Extjs ComboboxTree
N多人想用这个,以前项目用到了,代码如下
实现效果如下:
1Ext.onReady(function()
2 {
3 //自定义扩展一个带Tree的comboBox
4 Ext.ux.LovTreeCombo = Ext.extend(Ext.form.ComboBox, {
5 initList: function() {
6 this.list = new Ext.tree.TreePanel({
7 floating: true,
8 autoHeight: false,
9 autoExpand: true,
10 height: 240,
11 rootVisible: false,
12 containerScroll: true,
13 dataUrl: this.url,
14 root: {
15 nodeType: 'async',
16 text: 'root',
17 draggable: false,
18 id: 'root'
19 }
20 ,
21
22 listeners: {
23 checkchange: this.onNodeCheckChange,
24 scope: this
25
26 },
27 useArrows: true,
28 alignTo: function(el, pos) {
29 this.setPagePosition(this.el.getAlignToXY(el, pos));
30 }
31 });
32
33 },
34
35 expand: function() {
36 if (!this.list.rendered) {
37 this.list.render(document.body);
38 this.list.setWidth("660px");
39 this.innerList = this.list.body;
40 this.list.hide();
41 }
42 this.el.focus();
43 Ext.ux.LovTreeCombo.superclass.expand.apply(this, arguments);
44 },
45
46 doQuery: function(q, forceAll) {
47 this.expand();
48 },
49
50 collapseIf: function(e) {
51 if (!e.within(this.wrap) && !e.within(this.list.el)) {
52 this.collapse();
53 }
54 },
55
56 valueList: [],
57 textList: [],
58
59 getvalueList: function() {
60 return this.valueList;
61 },
62
63 onNodeCheckChange: function(node, e) {
64 if (!node.leaf) {
65 node.expand(true, false, function() {
66 node.eachChild(function(child) {
67 child.ui.toggleCheck(node.attributes.checked);
68 child.attributes.checked = node.attributes.checked;
69 child.fireEvent('checkchange', child, node.attributes.checked);
70 });
71
72 });
73
74 }
75 else {
76 //alert(1)
77 var nodeValue = node.id;
78 var test = this.valueList.indexOf(nodeValue);
79
80 if (test == -1 && node.attributes.checked) {
81 this.valueList.push(nodeValue)
82 this.textList.push(node.text);
83 }
84
85 if (test != -1 && !node.attributes.checked) {
86 this.valueList.remove(nodeValue);
87 this.textList.remove(node.text);
88 }
89
90 //if(window.console){console.log(this.valueList.toString())}共选择了'+this.valueList.length.toString()+'菜单:'+
91 var str = this.textList.toString();
92 this.setRawValue(str);
93
94
95 if (this.hiddenField) {
96 this.hiddenField.value = node.id;
97 }
98 }
99 //this.collapse();
100 },
101 url: '',
102 reset: function() {
103
104 this.valueList.length = 0;
105 this.textList.length=0;
106 this.applyEmptyText();
107
108 },
109
110
111 resetNode: function(node) {
112 this.collapseNode(node);
113 this.uncheckNode(node);
114 },
115
116 collapseNode: function(node) {
117 if (node.isExpanded()) {
118 node.collapse();
119 }
120 },
121
122 uncheckNode: function(node) {
123
124 if (node.getUI().isChecked()) {
125 if (window.console) { console.log("未能选中此节点ID " + node.attributes.id) }
126
127 node.getUI().toggleCheck(false);
128 }
129 }
130
131
132 });
133
134 //这边注册一下子
135 Ext.reg('treecombo', Ext.ux.LovTreeCombo);
136
137 //这边是使用方法
138 var lovTreeCombo2 = new Ext.ux.LovTreeCombo({
139 id:'cmb',
140 renderTo: 'cmb',
141 url: 'LoadTreeMenu.aspx ',
142 emptyText: '选择类型',
143 width: 660,
144 listWidth: 180
145 });
146
147 })