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添加重载函数的辅助方法
Jul 04 Javascript
js 函数的副作用分析
Aug 23 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
禁止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实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
对javascript继承的理解
2016/10/11 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python pickle模块用法实例
2015/04/14 Python
python模拟事件触发机制详解
2018/01/19 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python中如何导入类示例详解
2019/04/17 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
django有哪些好处和优点
2020/09/01 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
英文自荐信
2013/12/19 职场文书
仓库组长岗位职责
2014/01/29 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
签字仪式主持词
2015/07/03 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
python 对图片进行简单的处理
2021/06/23 Python
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers