码迷,mamicode.com
首页 > Web开发 > 详细

Extjs二级联动 Extjs combo 省 城市

时间:2015-06-03 11:15:04      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

 

 

 

 

 

技术分享

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 SelectCity:function(combo, record){
2   var TeacherCity= Ext.getCmp(‘cobTeacherCity‘)
3    var TeacherCityStore = TeacherCity.getStore();        
4    TeacherCity.reset();        
5    console.log(combo.getValue());        
6    TeacherCityStore.load({
7        params:{‘provinceCode‘:combo.getValue()==null?"":combo.getValue()}            
8    })        
9 },

  

Extjs二级联动 Extjs combo 省 城市

标签:

原文地址:http://www.cnblogs.com/shipskunkun/p/4548343.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!