extJs 下拉框联动实现代码


Posted in Javascript onApril 09, 2010
// 第一个下拉框 
var parentStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
url: 'loadByParentid.action?parentid=1001' 
}), 
reader: new Ext.data.JsonReader({ 
root: 'list', 
id: 'id' 
}, [ 
{name: 'id', mapping: 'id'}, 
{name: 'mc', mapping: 'name'} 
]) 
}); 
// 第二个下拉框 
var childStore = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({ 
//这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的 
url: 'loadByParentid.action?parentid=1001' 
}), 
reader: new Ext.data.JsonReader({ 
root: 'list', 
id: 'id' 
}, [ 
{name: 'id', mapping: 'id'}, 
{name: 'mc', mapping: 'name'} 
]) 
}); { 
fieldLabel: '请选择分类', 
xtype:'combo', 
store: parentStore, 
valueField :"id", 
displayField: "mc", 
mode: 'local', 
forceSelection: true,//必须选择一项 
emptyText:'请选择分类...',//默认值 
hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name 
editable: false,//不允许输入 
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 
//allowBlank:false,//该选项值不能为空 
id : 'parent_id', 
name: 'parent', 
width: 400, 
listeners:{ 
select : function(combo, record,index){ 
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value}); 
childStore.load(); 
} 
} 
},{ 
xtype:'combo', 
store: childStore, 
valueField :"id", 
displayField: "mc", 
//数据是在本地 
mode: 'local', 
forceSelection: true,//必须选择一项 
emptyText:'请选择子分类...',//默认值 
hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name 
editable: false,//不允许输入 
triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 
//allowBlank:false,//该选项值不能为空 
fieldLabel: '选择', 
id : 'child_id', 
name: 'child', 
width: 400 
}
Javascript 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
Javascript 命名空间模式
Nov 01 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
原生js二级联动效果
Jun 20 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
禁止js文件缓存的代码
Apr 09 #Javascript
javascript+mapbar实现地图定位
Apr 09 #Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 #Javascript
Javascript string 扩展库代码
Apr 09 #Javascript
JavaScript 设计模式之组合模式解析
Apr 09 #Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 #Javascript
基于JQuery的cookie插件
Apr 07 #Javascript
You might like
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python中if有多个条件处理方法
2020/02/26 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
职称自我鉴定
2013/10/15 职场文书
公司道歉信范文
2014/01/09 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
安全生产宣传标语
2014/06/06 职场文书
安全生产标语
2014/06/06 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
图神经网络GNN算法
2022/05/11 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL