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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
element中的$confirm的使用
2020/04/26 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python线程指南详细介绍
2017/01/05 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
从0开始的Python学习016异常
2019/04/08 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python restful框架接口开发实现
2020/04/13 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
django中ImageField的使用详解
2020/12/21 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
社区健康教育实施方案
2014/03/18 职场文书
重阳节标语大全
2014/10/07 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书