今天作combo两级省市菜单联动时遇到了两个问题:1 点击选择省的下拉列表后会向后台 进行两次请求,一次是Ajax传递的参数(省),另一个是第二个combo获取后台数据的请求,参数为null;2 后台可以根据前台传递过来的参数(省)得出该省对应的市,但是前台加载不到数据.在网上查了点资料终于解决了这两个问题.
js文件:
Ext.onReady(function(){
var _province = new Ext.data.JsonStore({
url:'../servlet/ProvinceServlet?action=first',
root:'first',
fields:['id','province']
});
_province.load();
var _city = new Ext.data.JsonStore({
url:'../servlet/ProvinceServlet?action=second',
root:'second',
fields:['city_id','province_id','city']
});
var _window = new Ext.Window({
renderTo:Ext.getBody(),
width:400,
height:400,
title:'两级菜单联动',
layout:'form',
items:[{
fieldLabel:'请选择省',
id:'firstCombo',
xtype:'combo',
width:200,
store:_province,
displayField:'province',
typeAhead:true,
mode:'remote',
forceSelection:true,
triggerAction:'all',
emptyText:'select a province...',
listeners:{
'select':function(combo, record,index){
Ext.Ajax.request({
url:'../servlet/ProvinceServlet?action=second',
success:function(){
var secondColumn = Ext.getCmp('secondColumn');
secondColumn.reset(); //将上一次的记录清除掉
_city.load(); //加载数据
},
fail:function(){
alert("fail");
},
params:{province:this.getValue()} //传递参数(被选择的省)
});
}
}
},{
fieldLabel:'请选择市',
id:'secondColumn',
xtype:'combo',
width:200,
store:_city,
displayField:'city',
typeAhead:true,
mode:'remote',
forceSelection:true,
triggerAction:'all',
emptyText:'select a city...'
}]
}).show();
})
后台代码:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("gbk");
PrintWriter out = response.getWriter();
IProvinceService provinceServiceImpl = new ProvinceServiceImpl();
String action = request.getParameter("action");
if("first".equals(action)){
JSONArray displayProvice = provinceServiceImpl.displayProvice();
out.print("{first:");
out.print(displayProvice);
out.print("}");
}else if("second".equals(action)){
String province = request.getParameter("province");
if(province!=null){ //Ajax请求
JSONArray city = provinceServiceImpl.getCityByProvince(province); //将数据保存起来
if(request.getSession().getAttribute("city")==null)
request.getSession().setAttribute("city", city);
}else{ //combo请求后台数据
Object city = request.getSession().getAttribute("city");
if(city!=null){
out.print("{second:");
out.print(city);
out.print("}");
}
request.getSession().setAttribute("city", null); //将session中的数据清空,否则记录将一直保存
}
}
out.flush();
out.close();
}