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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
JS画线(实例代码)
Nov 20 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
理解JavaScript中的对象
Aug 25 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
php 一元分词算法
2009/11/30 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python实现八皇后问题示例代码
2018/12/09 Python
简单了解django文件下载方式
2020/02/10 Python
如何在python中实现线性回归
2020/08/10 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
代办委托书怎么写
2014/08/01 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
群众路线领导对照材料
2014/08/23 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
人大代表选举标语
2014/10/07 职场文书
安全第一课观后感
2015/06/18 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Js类的构建与继承案例详解
2021/09/15 Javascript
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python