Extjs二级联动combo省城市

Extjs二级联动

Extjs combox根据省查询城市

实现效果如上图所示，

store层代码：

 Ext.define("ExtApp.store.TeacherProvince",{
     extend:"Ext.data.Store",
     fields:['provinceCode','provinceName'],
     autoLoad:true,
     proxy:{
         type:"ajax",
         url : 'getProvinces.action',
         reader:{
             type:"json",
             root:"rows",
             totalProperty:"results"
         }
     }
 });

view层：

 {
 　　xtype : 'combo',
    fieldLabel:'省份',
    name:'provinceName',
    margin:'0 3 0 0',
    flex:1,
    id : 'cobTeacherProvince',
    store : 'TeacherProvince',
    valueField : 'provinceCode',
    displayField : 'provinceName',
    editable : false,
    emptyText : '请先选省',
    queryMode : 'local'
 },{
    xtype : 'combo',
    margin:'0 0 0 3',
    flex:1,
    id : 'cobTeacherCity',
    store : Ext.create('Ext.data.Store', {
    　　fields : ['cityCode','cityName'],
        autoSync : true,
        proxy : {
        　　type : 'ajax',
           url : 'getCitys',
           reader : {
               type : 'json',
               root:"rows",
               totalProperty:"results"
           }
        }
    }),
    valueField : 'cityCode',
    displayField : 'cityName',
    editable : false,
    emptyText : '请选对应的城市',
    queryMode : 'local',
    fieldLabel : '城市',
    name:'cityName'
 }

　　controller层：

 StudentDetailsCity:function(combo, record){
         var StudentDetailsCity= Ext.getCmp('cobStudentDetailsCity')
         var StudentDetailsCityStore = StudentDetailsCity.getStore();
         StudentDetailsCity.reset();
         StudentDetailsCityStore.load({
             params:{'provinceName':combo.getValue()==null?"":combo.getValue()},
             callback:function(records, operation, success){
                 if(records.length==1){
                     StudentDetailsCity.setValue(records[0]);
                 }
                 else{
                     StudentDetailsCity.setValue("选择市");
                 }
             }
         });
     },

记录的问题：

　选择省之后，把城市Store换掉，然后根据callback函数，根据返回城市的个数显示：

　　1，如果只有一个城市，就显示一个城市

　   2，如果有多个城市，就显示选择城市

记住：store的callback函数和params

完善1：

通过组件的setValue方法

完善2：如何不改变省，只改变城市？

问题：这里改变城市为啥不能用select？

原因：因为city的store为空，只有在改变省份的时候，才调用getcitys.action ,将省名ProvinceName传递过去

所以不改变省就获取不到城市的store，所以要在citycombox添加一个监听事件，点击了就将store展开

select是选择事件，比如说好多省，选择之后触发城市store reset事件

expand是将组件展开组件事件，目的是将组件展开

 //修改城市
     StudentDetailsChangeCity:function(combo, record){
         var provinceName=Ext.getCmp('cobStudentDetailsProvince').getValue();
         var StudentDetailsCity= Ext.getCmp('cobStudentDetailsCity')
         var StudentDetailsCityStore = StudentDetailsCity.getStore();
         StudentDetailsCity.reset();
         StudentDetailsCityStore.load({
             params:{'provinceName':provinceName==null?"":provinceName}
         });
     },    

或者在load整个表格数据的时候，就将city的store加载，这样就不用添加对city combo的监听了

 loadData:function(form,opts){
         form.load({
             url:'queryInf',
             success:function(){
                 var TeacherCityStore = Ext.getCmp('cobTeacherCity').getStore();
                 var provinceName=Ext.getCmp('cobTeacherProvince').getValue();
                 TeacherCityStore.load({
                     params:{'provinceName':provinceName==null?"":provinceName}
                 });
             }
         });
     }