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

luobo2ni

 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);
 }
}

后台代码见附件中