Extjs二級關聯combo省城市

Extjs二級關聯

Extjs combox根據省查詢城市

實作效果如上圖所示，

store層代碼：

1 Ext.define("ExtApp.store.TeacherProvince",{
 2     extend:"Ext.data.Store",
 3     fields:['provinceCode','provinceName'],    
 4     autoLoad:true,                
 5     proxy:{
 6         type:"ajax",
 7         url : 'getProvinces.action',
 8         reader:{
 9             type:"json",
10             root:"rows",
11             totalProperty:"results"
12         }
13     }
14 });      

view層： 

1 {
 2 　　xtype : 'combo',
 3    fieldLabel:'省份',
 4    name:'provinceName',
 5    margin:'0 3 0 0',
 6    flex:1,
 7    id : 'cobTeacherProvince',
 8    store : 'TeacherProvince',                
 9    valueField : 'provinceCode',
10    displayField : 'provinceName',                
11    editable : false,
12    emptyText : '請先選省',
13    queryMode : 'local'        
14 },{
15    xtype : 'combo',               
16    margin:'0 0 0 3',
17    flex:1,
18    id : 'cobTeacherCity',
19    store : Ext.create('Ext.data.Store', {
20    　　fields : ['cityCode','cityName'],
21        autoSync : true,
22        proxy : {
23        　　type : 'ajax',
24           url : 'getCitys',
25           reader : {
26               type : 'json',
27               root:"rows",
28               totalProperty:"results"
29           }
30        }
31    }),                
32    valueField : 'cityCode',
33    displayField : 'cityName',
34    editable : false,                
35    emptyText : '請選對應的城市',
36    queryMode : 'local',
37    fieldLabel : '城市',                
38    name:'cityName'
39 }      

　　controller層： 

1 StudentDetailsCity:function(combo, record){
 2         var StudentDetailsCity= Ext.getCmp('cobStudentDetailsCity')
 3         var StudentDetailsCityStore = StudentDetailsCity.getStore();    
 4         StudentDetailsCity.reset();            
 5         StudentDetailsCityStore.load({
 6             params:{'provinceName':combo.getValue()==null?"":combo.getValue()},
 7             callback:function(records, operation, success){                
 8                 if(records.length==1){
 9                     StudentDetailsCity.setValue(records[0]);
10                 }
11                 else{
12                     StudentDetailsCity.setValue("選擇市");
13                 }
14             }
15         });
16     },      

 記錄的問題：

　選擇省之後，把城市Store換掉，然後根據callback函數，根據傳回城市的個數顯示：

　　1，如果隻有一個城市，就顯示一個城市

　   2，如果有多個城市，就顯示選擇城市

記住：store的callback函數和params

 完善1：

通過元件的setValue方法

 完善2：如何不改變省，隻改變城市？

問題：這裡改變城市為啥不能用select？

原因：因為city的store為空，隻有在改變省份的時候，才調用getcitys.action ,将省名ProvinceName傳遞過去

是以不改變省就擷取不到城市的store，是以要在citycombox添加一個監聽事件，點選了就将store展開

select是選擇事件，比如說好多省，選擇之後觸發城市store reset事件

expand是将元件展開元件事件，目的是将元件展開

1 //修改城市
 2     StudentDetailsChangeCity:function(combo, record){
 3         var provinceName=Ext.getCmp('cobStudentDetailsProvince').getValue();
 4         var StudentDetailsCity= Ext.getCmp('cobStudentDetailsCity')
 5         var StudentDetailsCityStore = StudentDetailsCity.getStore();
 6         StudentDetailsCity.reset();
 7         StudentDetailsCityStore.load({
 8             params:{'provinceName':provinceName==null?"":provinceName}        
 9         });
10     },          

  或者在load整個表格資料的時候，就将city的store加載，這樣就不用添加對city combo的監聽了

1 loadData:function(form,opts){
 2         form.load({
 3             url:'queryInf',
 4             success:function(){            
 5                 var TeacherCityStore = Ext.getCmp('cobTeacherCity').getStore();
 6                 var provinceName=Ext.getCmp('cobTeacherProvince').getValue();            
 7                 TeacherCityStore.load({
 8                     params:{'provinceName':provinceName==null?"":provinceName}
 9                 });
10             }
11         });
12     }      

轉載于:https://www.cnblogs.com/shipskunkun/p/4548343.html