基於extjs4的多級下拉框聯動組件

時間  2021-08-15 標籤 java ide 組件化 this 編碼 url spa code component orm

 原創文章，歡迎糾錯，轉載請註明出處
1.簡介
針對頁面中經常使用的2級、3級聯動抽象出一個聯動組件，目前支持一、二、3級下拉框，並可友好的擴展爲多級。
2.使用方法
可經過xtype直接使用，如下爲示例和源代碼 java

Java代碼 複製代碼 收藏代碼
  1.  
  2. /**
  3. * 多級下拉框組件，目前支持一、二、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則需指定combo一、combo二、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. //綁定事件,清空第2、三下拉框的值
  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中的組件放入其中組合成咱們須要的功能組件，並經過定義數據和配置接口爲其提供數據和相關配置。ide

联系我们 沪ICP备13005482号-10