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

Extjs二级联动combo省城市的更多相关文章

  1. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  2. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  3. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  4. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

  5. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  7. 份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

    package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...

  8. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  9. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

随机推荐

  1. ORA-00907: 缺失右括号(通用解决办法)

    PL/SQL 的SQL语句可以执行,但是放在hibernate中,后台打印,出现了错误. 错误的SQL解析:黄色为错误部分 Hibernate:      select         examine ...

  2. [mac]WireShark检測不到网卡怎么办?

    wireshark是一个很好用的抓包工具,有windows版本号和mac版本号,在mac下安装wireshark,启动后发现提示"There are no interfaces on whi ...

  3. Silverlight调用WCF(1)

    [置顶] Silverlight调用WCF(1) 分类: 技术2012-03-31 12:29 940人阅读 评论(0) 收藏 举报 wcfsilverlightexceptionusersecuri ...

  4. Tarjan求桥

    传送门(poj3177) 这道题是Tarjan求桥的模板题.大意是要求在原图上加上数量最少的边,使得整张图成为一个边双联通分量. 具体的做法是,先在图中求出所有的桥,之后把边双联通分量缩成点,这样的话 ...

  5. 4.7.4 Constructing LALR Parsing Tables

    4.7.4 Constructing LALR Parsing Tables We now introduce our last parser construction method, the LAL ...

  6. NOIP 2011 Mayan游戏 大暴搜

    题目链接:https://www.luogu.org/problemnew/show/P1312 我的第一篇题解!! 当然感谢ZAGER 的提示,他的链接https://www.cnblogs.com ...

  7. maven中的三种工程,以及在idea中构建父子工程。

    1.pom工程:用在父级工程或聚合工程中.用来做jar包的版本控制.主要是定义POM文件,将后续各个子模块公用的jar包等统一提出来,类似一个抽象父类 2.war工程:将会打包成war,发布在服务器上 ...

  8. System.Drawing.Color的几种使用方法

    System.Drawing.Color   cl   =   Color.Red; System.Drawing.Color   cl   =   Color.FromArgb(255,0,0); ...

  9. Spring Theme简单应用

    Spring MVC特性里由一个是关于Spring Theme主题的应用,所以写了个Demo 1.这里先看项目结构(Meven项目) 2.所需的POM依赖 <dependency> < ...

  10. mycat重启报错Failed to connect to the Wrapper at port解决方法

    报错信息 ERROR | wrapper | 2018/05/11 14:01:55 | Startup failed: Timed out waiting for a signal from the ...