Extjs3+MySQL后台数据库实现省份城市二级联动

 Extjs+MySQL后台数据库实现省份城市二级联动 

基本代码如下：

Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	Ext.BLANK_IMAGE_URL = "../js/Ext/resources/images/default/s.gif";
	
	var storeProvince = new Ext.data.JsonStore({
		url:"http://localhost/procity/servlet/ProCityServlet",
		fields:["proid", "proname"]
	});
	
	var storeCity = new Ext.data.JsonStore({
		url:"",
		fields:["city", "cityname"]
	});
	
	var storeCounty = new Ext.data.JsonStore({
		fields:["value", "text"],
		data:[]
	});
	
	var form = new Ext.form.FormPanel({
		title:"Register",
		frame:true,
		border:false,
		labelAlign:"right",
		width:500,
		autoHeight:true,
		//defaultType:"textfield",
		//layout:"form",	
		buttonAlign:"center",
		labelWidth:55,
		url:"request.jsp",	
		items:[{
			xtype:"textfield",
			id:"username",
			fieldLabel:"用户名",
			emptyText:"www.xiless.com",
			allowBlank:false,
			msgTarget:"side",
			minLength:3,
			maxLength:20,
			anchor:"50%",
			name:"username"		
		}, {
			xtype:"textfield",
			fieldLabel:"年龄",
			id:"age",
			emptyText:"22",
			anchor:"50%"		
		}, {
			fieldLabel:"出生日期",	
			xtype:"datefield",
			anchor:"50%",
			format:"Y-m-d",
			emptyText:"1988-12-11"			
		},{
			fieldLabel:"工作时间",
			xtype:"timefield",
			minValue: "9:00 AM",
   	 		maxValue: "6:00 PM",
   	 		increment: 30,
			anchor:"50%",
			emptyText:"9:00 AM"		
		},{		
			xtype:"textfield",
			fieldLabel:"地址",
			id:"address",
			emptyText:"address",
			anchor:"50%"		
		}, {
			xtype:"textfield",
			fieldLabel:"电子邮件",
			id:"email",
			emptyText:"weijunfeng126@126.com",
			anchor:"50%"			
		}, {
			xtype:"textfield",
			fieldLabel:"联系方式",
			id:"linkphone",
			emptyText:"88888888",
			anchor:"50%"		
		}, {
			fieldLabel:"省",
			id:"province",
			name:"province",
			hiddenName:"sex",
			xtype:"combo",
			emptyText:"请选择省份",
			mode:"local",
			triggerAction:"all",
			valueField:"proid",
			displayField:"proname",
			editable:false,
			mode:"remote",
			store:storeProvince
		},{
			fieldLabel:"市",
			name:"city",
			id:"city",
			hiddenName:"sex",
			xtype:"combo",
			emptyText:"请选择省市",
			mode:"local",
			triggerAction:"all",
			valueField:"city",
			displayField:"cityname",
			editable:false,
			//value:"男",
			//forceSelection:true,
			store:storeCity
		},{
			fieldLabel:"区",
			name:"county",
			hiddenName:"sex",
			xtype:"combo",
			emptyText:"请选择区",
			mode:"local",
			triggerAction:"all",
			valueField:"value",
			displayField:"text",
			editable:false,
			//value:"男",
			//forceSelection:true,
			store:storeCounty
		},{
			fieldLabel:"备注",				
			xtype:"htmleditor",				
			anchor:"98%",
			autoHeight:true,		
			enableSourceEdit:false,
			enableLinks:false,
			enableFont:true,
			fontFamilies:["黑体", "仿宋", "宋体", "楷体"]	
		},{
			xtype:"hidden",
			id:"hiddenId",
			value:"www.xiless.com"	
		}],		
		buttons:[{
			text:"登陆",
			handler:function() {
				  var username = form.findById("username");
				  //alert(username.getValue());		
				  //alert(form.findById("hiddenId").getValue());	
				 // Ext.Msg.alert("系统提示", form.findById("hiddenId").getValue());
				 form.getForm().submit({
				 	success:function(fosrm, action) {
				 		alert(action.result.msg);
				 		form.getForm().reset();
				 		win.hide();
				 		//form.hide(); 	
				 	}, 
				 	failure:function() {
				 		alert("失败");
				 	}
				 });
			}		
		}, {
			text:"取消",
			//type:"reset",
			handler:function() {
				form.getForm().reset();
			}			
		}]		
	});
	form.render("form");
	
	form.get("province").on("select", function(combo) {
		var province = combo.getValue();
		storeCity.removeAll();
		storeCity.proxy = new Ext.data.HttpProxy({
			url:"http://localhost/procity/servlet/ProCityServlet?id=" + province
		});
		storeCity.reload();
	});
	
});



 

/**
 * 省份城市Servlet
 * 
 * @author xiaowei
 * 
 */
public class ProCityServlet extends HttpServlet {

 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request, response);
 }

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setCharacterEncoding("UTF-8");
  if(request.getParameter("id") != "" && request.getParameter("id") != null) {
   getCityList(request, response);
  } else {
   getProList(request, response);
  }
 }

 public void getProList(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  response.setCharacterEncoding("UTF-8");
  ProCityManager mgr = new ProCityManagerImpl();
  List<Province> list = mgr.getProList();
  JSONArray jarr = new JSONArray();
  for (Province p : list) {
   JSONObject obj = new JSONObject();
   obj.put("proid", p.getProid());
   obj.put("proname", p.getProname());
   jarr.add(p);
  }
  response.getWriter().println(jarr);
  //System.out.println(jarr);
 }

 public void getCityList(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setCharacterEncoding("UTF-8");
  int proId = Integer.parseInt(request.getParameter("id"));
  ProCityManager mgr = new ProCityManagerImpl();
  List<City> list = mgr.getCityListByProId(proId);
  JSONArray jarr = new JSONArray();
  for (City c : list) {
   JSONObject obj = new JSONObject();
   obj.put("cityid", c.getCity());
   obj.put("cityname", c.getCityname());
   jarr.add(c);
  }
  response.getWriter().println(jarr);
  //System.out.println(jarr);
 }

}

后台代码见附件中