原创文章，欢迎纠错，转载请注明出处
1.简介
针对页面中常用的2级、3级联动抽象出一个联动组件，目前支持1、2、3级下拉框，并可友好的扩展为多级。
2.使用方法
可通过xtype直接使用，以下为示例和源代码

Java代码 基于extjs4的多级下拉框联动组件 _的 基于extjs4的多级下拉框联动组件 _的_02
  1.  
  2. /**
  3. * 多级下拉框组件，目前支持1、2、3级
  4. * e.g:
  5. {
  6. fieldLabel: "管理地区<font color='red'>*</font>", //设置label
  7. margin: '5px 0px 5px 20px', //边距
  8. xtype:'multiCombo', //类型
  9. colspan:2,
  10. readOnly:false,//true即下拉框全部为只读
  11. width:1000,
  12. config:{ //此处为多级combo的配置
  13. comboNumber:3, //combo数，如果为3则需指定combo1、combo2、combo3的配置情况
  14. combo1:{//第一下拉框配置,此处配置项同extjs combo组件
  15. name:'provinceCombo',
  16. fields:["provinceName","provinceCode"],
  17. data : [
  18. #foreach($item in $provinceList)
  19. #if("$velocityCount"!="1"),#end
  20. {"provinceName":"$!item.locationName", "provinceCode":"$!item.locationCode"}
  21. #end
  22. ]
  23. },combo2:{//第二下拉框配置,此处配置项：name、fields同extjs combo组件
  24. name:'cityCombo',
  25. fields:["cityName","cityCode"],
  26. //dataUrl为第二下拉框的数据请求地址，在点击下拉框时触发请求，根据第一下拉框的值请求对应的值填充到下拉框。
  27. //此处即根据省份的编码取市级信息填充
  28. dataUrl:'base-info!getCitysOfProvince.do?provinceCode=',
  29. parentEmptyMsg:'请选择省份信息'//若没有选择第一下拉框的值就点击此下拉框将弹出此提示
  30. },combo3:{//第三下拉框配置
  31. name:'regLocationId',
  32. editable:false,//是否可编辑，同extjs中的combo
  33. fields:["districtName","regLocationId"],
  34. dataUrl:'base-info!getDistrictsOfCity.do?cityCode=',
  35. parentEmptyMsg:'请选择市级信息'
  36. }
  37. }
  38. }
  39. * @author sunpf
  40. * @date 2013-1-20
  41. */
  42. Ext.define('Glodon.gbmp.component.comp.combo.MultiCombo', {
  43. extend : 'Ext.form.FieldContainer',
  44. alias : 'widget.multiCombo',
  45. layout : 'hbox',
  46. width : '100%',
  47.  
  48. config : null,
  49. parentItem : null,//第一下拉框
  50. childItem1 : null,//第二下拉框
  51. childItem2 : null,//第三下拉框
  52. parentItemCode : null,//第一下拉框值的编码，用于防止多次请求相同的数据
  53. childItem1Code : null,//第二下拉框值的编码，用于防止多次请求相同的数据
  54.  
  55. initComponent : function() {
  56. var me = this, mItems;
  57. mItems = me.createSelectItems();
  58. me.items = mItems;
  59. me.callParent();
  60. },
  61.  
  62. /**
  63. * 创建并初始化下拉选择框
  64. * @returns {Array}
  65. */
  66. createSelectItems : function(){
  67. var me = this;
  68. var selectItems = [];
  69.  
  70. //1.生成第一下拉框
  71. me.parentItem = me.createParentItem(me.config.combo1);
  72. selectItems.push(me.parentItem);
  73. if(me.config.comboNumber && me.config.comboNumber > 1 ){
  74.  
  75. //2.生成第二下拉框
  76. me.childItem1 = me.createChildItem(me.config.combo2,me.parentItem,me.parentItemCode);
  77. selectItems.push(me.childItem1);
  78.  
  79. if(me.config.comboNumber > 2){
  80.  
  81. //3.生成第三下拉框
  82. me.childItem2 = me.createChildItem(me.config.combo3,me.childItem1,me.childItem1Code);
  83. selectItems.push(me.childItem2);
  84.  
  85. //绑定事件，清空第三下拉框的值
  86. me.childItem1.on('select',function(){
  87. me.childItem2.clearValue();
  88. me.childItem2.getStore().removeAll();
  89. });
  90. }
  91.  
  92. //绑定事件,清空第二、三下拉框的值
  93. me.parentItem.on('select',function(){
  94. me.childItem1.clearValue();
  95. me.childItem1.getStore().removeAll();
  96. if(me.childItem2){
  97. me.childItem2.clearValue();
  98. me.childItem2.getStore().removeAll();
  99. }
  100. });
  101. }
  102. return selectItems;
  103. },
  104.  
  105. /**
  106. * 创建第一级下拉项
  107. */
  108. createParentItem : function(comboCfg){
  109. var me = this,parentItem;
  110. parentItem = Ext.create('Ext.form.ComboBox', {
  111. name : comboCfg.name,
  112. fieldLabel : '',
  113. hideLabel : true,
  114. editable : comboCfg.editable==true?true:false,
  115. readOnly :me.readOnly == true?true:false,
  116. allowBlank : false,
  117. value:comboCfg.value,
  118. displayField : comboCfg.fields[0],
  119. valueField : comboCfg.fields[1],
  120. store : {
  121. fields: [comboCfg.fields[0], comboCfg.fields[1]],
  122. data : comboCfg.data
  123. },
  124. queryMode: 'local'
  125. });
  126. return parentItem;
  127. },
  128.  
  129.  
  130. /**
  131. * 创建子下拉项
  132. */
  133. createChildItem : function(comboCfg,parentCombo,parentCode){
  134. var me = this,childItem;
  135. childItem = Ext.create('Ext.form.ComboBox', {
  136. name : comboCfg.name,
  137. editable : comboCfg.editable==true?true:false,
  138. readOnly :me.readOnly == true?true:false,
  139. value : comboCfg.value,
  140. parentCombo : parentCombo,
  141. parentCode : parentCode,
  142. comboCfg : comboCfg,
  143. allowBlank : false,
  144. mode : 'local',
  145. displayField : comboCfg.fields[0],
  146. valueField : comboCfg.fields[1],
  147. store:{
  148. fields: [comboCfg.fields[0], comboCfg.fields[1]],
  149. data : !comboCfg.data ? comboCfg : [],
  150. },
  151. listeners : {
  152. 'expand' : function(combo){
  153. if(combo.store.data.length == 0){
  154. var value1 = combo.parentCombo.getValue();
  155. if(!value1){
  156. Ext.Msg.alert("提醒",combo.comboCfg.parentEmptyMsg);
  157. return false;
  158. }
  159. if(combo.parentCode == value1.trim()){
  160. return false;
  161. }
  162. combo.parentCode = value1.trim();
  163. var reqConfig = {
  164. url : combo.comboCfg.dataUrl + combo.parentCode,
  165. success : function(response,options) {
  166. combo.getStore().loadData(Ext.decode(response.responseText));
  167. }
  168. };
  169. Ext.Ajax.request(reqConfig);
  170. }
  171. }
  172. }
  173. });
  174. return childItem;
  175. }
  176.  
  177. });



3.扩展思路
通过这个组件为我们将系统中通用的小功能组件化提出了一种思路，通过继承FieldContainer将几个Extjs中的组件放入其中组合成我们需要的功能组件，并通过定义数据和配置接口为其提供数据和相关配置。