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. varself=this;
6. Ext.apply(self,{
7. fieldLabel:self.fieldLabel,
8. labelWidth:self.labelWidth
9. });
10. self.callParent();
11. },
12. createPicker:function(){
13. varself=this;
14. varstore=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=newExt.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. varcheckModel=self.checkModel;
47. if(checkModel=='double'){
48. varroot=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){
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{
65. varcascade=self.cascade;
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. });
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. }
82. }
84. }elseif(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){
89. record.set('checked',false);
91. });
92. }
94. }
96. }
98. varrecords=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. }
110. },
111. itemclick:function(tree,record,item,index,e,options){
112. varcheckModel=self.checkModel;
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. }
124. }
125. });
126. returnself.picker;
127. },
128. alignPicker:function(){
129. varme=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. varcom=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":"ToDo",
3. "cls":"folder",
4. "expanded":true,
5. "children":[{
6. "text":"Gojogging",
7. "leaf":true
8. },{
9. "text":"Takeanap",
10. "leaf":true
12. },{
13. "text":"ClimbEverest",
14. "leaf":true
16. }]
17. },{
18. "text":"GroceryList",
19. "cls":"folder",
20. "children":[{
21. "text":"Bananas",
22. "leaf":true
24. },{
25. "text":"Milk",
26. "leaf":true
28. },{
29. "text":"Cereal",
30. "leaf":true
32. },{
33. "text":"Energyfoods",
34. "cls":"folder",
35. "children":[{
36. "text":"Coffee",
37. "leaf":true
39. },{
40. "text":"RedBull",
41. "leaf":true
43. }]
44. }]
45. },{
46. "text":"RemodelProject",
47. "cls":"folder",
48. "children":[{
49. "text":"Finishthebudget",
50. "leaf":true
52. },{
53. "text":"Callcontractors",
54. "leaf":true
56. },{
57. "text":"Choosedesign",
58. "leaf":true
60. }]
61. }]

二.带复选框的数据

[html] view plain copy

1. [{
2. "text":"ToDo",
3. "cls":"folder",
4. "expanded":true,
5. "children":[{
6. "text":"Gojogging",
7. "leaf":true,
8. "checked":true
9. },{
10. "text":"Takeanap",
11. "leaf":true,
12. "checked":false
13. },{
14. "text":"ClimbEverest",
15. "leaf":true,
16. "checked":false
17. }]
18. },{
19. "text":"GroceryList",
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":"Energyfoods",
35. "cls":"folder",
36. "children":[{
37. "text":"Coffee",
38. "leaf":true,
39. "checked":false
40. },{
41. "text":"RedBull",
42. "leaf":true,
43. "checked":false
44. }]
45. }]
46. },{
47. "text":"RemodelProject",
48. "cls":"folder",
49. "children":[{
50. "text":"Finishthebudget",
51. "leaf":true,
52. "checked":false
53. },{
54. "text":"Callcontractors",
55. "leaf":true,
56. "checked":false
57. },{
58. "text":"Choosedesign",
59. "leaf":true,
60. "checked":false
61. }]
62. }]