Extjs combo 两级菜单联动

今天作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();
 }