开篇 ext comboBox联动

     最近在搞ext有问题google之的时候发现很多朋友都有这样那样的问题，并且有很多都没有最终的答案。

做了一阵子感觉还是有所得的，所以贴出来点可以直接用的东西大家一起讨论进步。

 

comboBox的多极联动可定时在开发中常用的事情，今天也是想在深入的研究comboBox的时候又看到了久之前一个朋友的问题。这里把自己用到的方法给朋友们分享下，尤其是刚看是接触ext的朋友。

 

我们的例子是，省份-->城市联动

 

首先我们需要两个stroe去读取远程数据：

/**

   *放置province信息的Store

   */

var provinceStore = new Ext.data.Store({
   autoLoad : false,  //设置为不自动读取数据
   proxy : new Ext.data.HttpProxy({
    url : 'searchProvince.html'
   }),
   reader : new Ext.data.JsonReader({
     root : "provinceList", //回传的数据集合，名称与action中的属性名一致
     id : "provinceStore_id"
    },[
     {name : 'provinceName',mapping : 'provinceName'},
     {name : 'provinceId',mapping : 'provinceId'}
    ]
   )
  });
  /**

   *放置city信息的Store

   */
  var cityStore= new Ext.data.Store({
   autoLoad : false, 
   proxy : new Ext.data.HttpProxy({
    url : 'searchCityList.html',
    method : 'POST'
   }),
   reader : new Ext.data.ArrayReader({
    root : 'cityList',
    id : 'cityStore_id'
   }, [
    {name : 'cityName',mapping : 'cityName'},

    {name : 'cityId',mapping : 'cityId'}
    ]
   )
  });

 

好的两个Store设置完成这样我们在调用每个的load方法时，数据将被加载到相应的store里

    ps：store能不autoLoad尽量不要，不然你有大量的数据自动加载时页面响应的速度会让你郁闷to death

言归正传~

 

下面我们的主角ComboBox来了

  我们的combo在某个items里,当然你可以单独new出来用再调用~

 items : [

     {
    fieldLabel : '省份,
    xtype : 'combo',
    store : provinceStore,
    id : 'provinceCombo',
    triggerAction : 'all',//默认为"query"如果不是all的话，选择一次以后其他的值就不见了
    readOnly :true,//只读

    mode : 'remote',//远程模式

    name : 'provinceCombo',
    valueField : "provinceId",//实际在请求中传递的值
    displayField : "provinceName",//显示在下拉框里的值
    handler : function () {
     proviceStore.load();//读取省份的信息
    },
    listeners : {
     select : function(combo, record, index) {
      //每次重新选中的时候把cityCombo的值设置为空
      //当然也可以通过这个方法为cityCombo设置一个初始值，依据具体应用而定

      //this.getValue（这个是Id值）或者record.data.provinceName把这个放到setValue里就可以做到了。

      Ext.getCmp('cityCombo').setValue('');

      cityStore.load({
       params : {
        provinceId : this.getValue()

        //cityStore向'searchCityList.html'请求是附带参数provinceId，可以根据这个值查询出某个省相应的城市信息
       }
      });
     }
    }
    }, {
     fieldLabel : '城市',
     xtype : 'combo',
     store : cityStore,
     readOnly : true,
     id : 'cityCombo',
     mode : 'local',//本地模式
     name : 'cityCombo',
     valueField : "cityId",

     triggerAction : 'all', 
     displayField : "cityName"

    }

 ]

 这段ext代码的主要处理过程都在provinceCombo里，我们首先监听了provice的点击事件，当被点击的时候加载provinceStroe，数据被展示在省份的下拉列表里，这个时候l再监听选中这个事件，我们知道了我们选中的是谁，他的index以及他的record，这个时候我们可以轻松的获得他的值并进行相应的处理。

 

    现在我们就可以去load cityStore了，在load的时候将参数传递给searchCityList.html这个action进行相应的查询。

   

    列表返回了，加载成功了，下拉框出来了~哈哈

 

  ok~一个简单的ComboBox联动就完成了

 

第一次在javaeye发博，请高手指摘~

评论

2 楼 b052617 2009-09-03  

您只的是什么情况，能否描述一下，我没看太明白~

1 楼 shytian 2009-09-01  

使用这种方法如果你要加载显示一对省市就会有问题