Ext JS4百强应用: combobox+tree下拉树 支持单选多选级联选择 --第7强

   本下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!

效果图.

• 不带checked的json数据格式只支持单选

• 带jchecked的json数据的单选

• 带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

封装基类代码

:ComboboxTree.js

[html]  view plain copy

1. Ext.define("Ext.ux.ComboboxTree", {  
2.     extend: "Ext.form.field.Picker",  
3.     requires: ["Ext.tree.Panel"],  
4.     initComponent: function() {  
5.         var self = this;  
6.         Ext.apply(self, {  
7.             fieldLabel: self.fieldLabel,  
8.             labelWidth: self.labelWidth  
9.         });  
10.         self.callParent();  
11.     },  
12.     createPicker: function() {  
13.         var self = this;  
14.         var store = Ext.create('Ext.data.TreeStore', {  
15.             proxy: {  
16.                 type: 'ajax',  
17.                 url: self.storeUrl  
18.             },  
19.             sorters: [{  
20.                 property: 'leaf',  
21.                 direction: 'ASC'  
22.             },  
23.             {  
24.                 property: 'text',  
25.                 direction: 'ASC'  
26.             }],  
27.             root: {  
28.                 id: self.rootId,  
29.                 text: self.rootText  
30.             },  
31.             nodeParameter: self.treeNodeParameter  
32.         });  
33.         self.picker = new Ext.tree.Panel({  
34.             height: 300,  
35.             autoScroll: true,  
36.             floating: true,  
37.             focusOnToFront: false,  
38.             shadow: true,  
39.             ownerCt: this.ownerCt,  
40.             useArrows: true,  
41.             store: store,  
42.             rootVisible: false  
43.         });  
44.         self.picker.on({  
45.             checkchange: function(record, checked) {  
46.                 var checkModel = self.checkModel;  
47.                 if (checkModel == 'double') {  
48.                     var root = self.picker.getRootNode();  
49.                     root.cascadeBy(function(node) {  
50.                         if (node.get('text') != record.get('text')) {  
51.                             node.set('checked', false);  
52.                         }  
53.                     });  
54.                     if (record.get('leaf') && checked) {  
55.   
56.                         self.setRawValue(record.get('id')); // 隐藏值  
57.                         self.setValue(record.get('text')); // 显示值  
58.                     } else {  
59.                         record.set('checked', false);  
60.                         self.setRawValue(''); // 隐藏值  
61.                         self.setValue(''); // 显示值  
62.                     }  
63.                 } else {  
64.   
65.                     var cascade = self.cascade;  
66.   
67.                     if (checked == true) {  
68.                         if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
69.                             if (cascade == 'child' || cascade == 'both') {  
70.                                 if (!record.get("leaf") && checked) record.cascadeBy(function(record) {  
71.                                     record.set('checked', true);  
72.                                 });  
73.   
74.                             }  
75.                             if (cascade == 'parent' || cascade == 'both') {  
76.                                 pNode = record.parentNode;  
77.                                 for (; pNode != null; pNode = pNode.parentNode) {  
78.                                     pNode.set("checked", true);  
79.                                 }  
80.                             }  
81.   
82.                         }  
83.   
84.                     } else if (checked == false) {  
85.                         if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  
86.                             if (cascade == 'child' || cascade == 'both') {  
87.                                 if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {  
88.   
89.                                     record.set('checked', false);  
90.   
91.                                 });  
92.                             }  
93.   
94.                         }  
95.   
96.                     }  
97.   
98.                     var records = self.picker.getView().getChecked(),  
99.                     names = [],  
100.                     values = [];  
101.                     Ext.Array.each(records,  
102.                     function(rec) {  
103.                         names.push(rec.get('text'));  
104.                         values.push(rec.get('id'));  
105.                     });  
106.                     self.setRawValue(values.join(';')); // 隐藏值  
107.                     self.setValue(names.join(';')); // 显示值  
108.                 }  
109.   
110.             },  
111.             itemclick: function(tree, record, item, index, e, options) {  
112.                 var checkModel = self.checkModel;  
113.   
114.                 if (checkModel == 'single') {  
115.                     if (record.get('leaf')) {  
116.                         self.setRawValue(record.get('id')); // 隐藏值  
117.                         self.setValue(record.get('text')); // 显示值  
118.                     } else {  
119.                         self.setRawValue(''); // 隐藏值  
120.                         self.setValue(''); // 显示值  
121.                     }  
122.                 }  
123.   
124.             }  
125.         });  
126.         return self.picker;  
127.     },  
128.     alignPicker: function() {  
129.         var me = this,  
130.         picker, isAbove, aboveSfx = '-above';  
131.         if (this.isExpanded) {  
132.             picker = me.getPicker();  
133.             if (me.matchFieldWidth) {  
134.                 picker.setWidth(me.bodyEl.getWidth());  
135.             }  
136.             if (picker.isFloating()) {  
137.                 picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl  
138.                 isAbove = picker.el.getY() < me.inputEl.getY();  
139.                 me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx);  
140.                 picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx);  
141.             }  
142.         }  
143.     }  
144. });  

调用方法

[html]  view plain copy

1. Ext.onReady(function() {  
2.     var com = Ext.create("Ext.ux.ComboboxTree", {  
3.         id : 'name',  
4.         name : 'name',  
5.         hiddenName : 'hiddenName',  
6.         storeUrl : 'data/tree2.json',  
7.         cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  
8.         checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  
9.         width : 270,  
10.         fieldLabel : '单位树',  
11.         labelWidth : 60,  
12.         rootId : '1',  
13.         rootText : 'DRP',  
14.         treeNodeParameter : '',  
15.         renderTo : Ext.getBody()  
16.     });  
17. });  

两种json格式的数据

一,不带复选框的数据

[html]  view plain copy

1. [{  
2.     "text": "To Do",   
3.     "cls": "folder",  
4.     "expanded": true,  
5.     "children": [{  
6.         "text": "Go jogging",  
7.         "leaf": true  
8.     },{  
9.         "text": "Take a nap",  
10.         "leaf": true  
11.          
12.     },{  
13.         "text": "Climb Everest",  
14.         "leaf": true  
15.          
16.     }]  
17. },{  
18.     "text": "Grocery List",  
19.     "cls": "folder",  
20.     "children": [{  
21.         "text": "Bananas",  
22.         "leaf": true  
23.          
24.     },{  
25.         "text": "Milk",  
26.         "leaf": true  
27.          
28.     },{  
29.         "text": "Cereal",  
30.         "leaf": true  
31.          
32.     },{  
33.         "text": "Energy foods",  
34.         "cls": "folder",  
35.         "children": [{  
36.             "text": "Coffee",  
37.             "leaf": true  
38.              
39.         },{  
40.             "text": "Red Bull",  
41.             "leaf": true  
42.              
43.         }]  
44.     }]  
45. },{  
46.     "text": "Remodel Project",   
47.     "cls": "folder",  
48.     "children": [{  
49.         "text": "Finish the budget",  
50.         "leaf": true  
51.          
52.     },{  
53.         "text": "Call contractors",  
54.         "leaf": true  
55.          
56.     },{  
57.         "text": "Choose design",  
58.         "leaf": true  
59.          
60.     }]  
61. }]  

 

二.带复选框的数据

 

[html]  view plain copy

1. [{  
2.     "text": "To Do",   
3.     "cls": "folder",  
4.     "expanded": true,  
5.     "children": [{  
6.         "text": "Go jogging",  
7.         "leaf": true,  
8.         "checked": true  
9.     },{  
10.         "text": "Take a nap",  
11.         "leaf": true,  
12.         "checked": false  
13.     },{  
14.         "text": "Climb Everest",  
15.         "leaf": true,  
16.         "checked": false  
17.     }]  
18. },{  
19.     "text": "Grocery List",  
20.     "cls": "folder",  
21.     "children": [{  
22.         "text": "Bananas",  
23.         "leaf": true,  
24.         "checked": false  
25.     },{  
26.         "text": "Milk",  
27.         "leaf": true,  
28.         "checked": false  
29.     },{  
30.         "text": "Cereal",  
31.         "leaf": true,  
32.         "checked": false  
33.     },{  
34.         "text": "Energy foods",  
35.         "cls": "folder",  
36.         "children": [{  
37.             "text": "Coffee",  
38.             "leaf": true,  
39.             "checked": false  
40.         },{  
41.             "text": "Red Bull",  
42.             "leaf": true,  
43.             "checked": false  
44.         }]  
45.     }]  
46. },{  
47.     "text": "Remodel Project",   
48.     "cls": "folder",  
49.     "children": [{  
50.         "text": "Finish the budget",  
51.         "leaf": true,  
52.         "checked": false  
53.     },{  
54.         "text": "Call contractors",  
55.         "leaf": true,  
56.         "checked": false  
57.     },{  
58.         "text": "Choose design",  
59.         "leaf": true,  
60.         "checked": false  
61.     }]  
62. }]