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