国家、省市区县Combox联动,动态加载数据

最新推荐文章于 2021-02-24 03:54:20 发布

原创最新推荐文章于 2021-02-24 03:54:20 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #Ajax #json

ExtJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种实现国家、省、市、区县四级级联选择的方法，通过使用ExtJS框架创建组合框，并利用Ajax请求动态加载数据，确保在用户选择不同级别的地区时能够及时更新下一级的数据。

国家、省市区县Combox联动,动态加载数据

{
							fieldLabel : '组织所属国家',
							hiddenName : 'sysOrganize.country',
							id : 'country',
							xtype : 'combo',
							editable : false,
							emptyText : '请选择······',
							mode : "local",
							lazyInit : false,
							allowBlank : false,
							forceSelection: true,
						    displayField : 'country',
							valueField : 'country',
							triggerAction : 'all',
							anchor : '95%',
							store : new Ext.data.SimpleStore({
										autoLoad : true,
										url : __ctxPath+ '/sys/base/loadSysDictionary.do?dataType=TYPE56fd7c4d',
										fields : ['country', 'country']
									}),
							listeners : {'select' : function(combo, record,index) {
									   var parent = Ext.getCmp('province')
									   parent.clearValue();
									   var paStore = parent.getStore();
									   Ext.Ajax.request({
								       url : __ctxPath+ '/sys/base/loadSysDictionary.do',
									   method : 'post', 
								       params:{
								      	  dataType:combo.value
								       },
								       success : function(response) {
												var result = Ext.util.JSON.decode(response.responseText);
												paStore.loadData(result);
											}
								    
								    })
										
									}
								}
						}, 
{
								fieldLabel : '所属省',
								hiddenName : 'sysOrganize.province',
								id : 'province',
								xtype : 'combo',
							    displayField : 'province',
								valueField : 'province',
								editable : false,
								mode : "local",
								emptyText : '请选择······',
								lazyInit : false,
								forceSelection: true,
								allowBlank : false,
								triggerAction : 'all',
								anchor : '95%',
								store : [],
								listeners : {'select' : function(combo, record,index) {
										   var parent = Ext.getCmp('city')
										   parent.clearValue();
										   var paStore = parent.getStore();
										   Ext.Ajax.request({
									       url : __ctxPath+ '/sys/base/loadSysDictionary.do',
										   method : 'post', 
									       params:{
									      	  dataType:combo.value
									       },
									       success : function(response) {
													var result = Ext.util.JSON.decode(response.responseText);
													paStore.loadData(result);
												}
									    
									    })
											
										}
									}
						}, 
{
							fieldLabel : '市（区、县、镇、乡）',
							hiddenName : 'sysOrganize.city',
							id : 'city',
							xtype : 'combo',
						    displayField : 'city',
							valueField : 'city',
							editable : false,
							mode : "local",
							emptyText : '请选择······',
							lazyInit : false,
							forceSelection: true,
							allowBlank : false,
							triggerAction : 'all',
							anchor : '95%',
							store : []
						},