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 常用方法经典总结
Jan 28 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
js实现圆形菜单选择器
Dec 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
利用PHP动态生成VRML网页
2006/10/09 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
python关键字and和or用法实例
2015/05/28 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python如何将模块打包并发布
2020/08/30 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
导游个人求职信
2014/04/25 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年党小组工作总结
2015/05/26 职场文书