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 HashTable
Jan 22 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
基于Vue的侧边目录组件的实现
Feb 05 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的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
微信小程序 标签传入数据
2017/05/08 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
vue vant Area组件使用详解
2019/12/09 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python线程join方法原理解析
2020/02/11 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
信息部岗位职责
2013/11/12 职场文书
劳资专员岗位职责
2013/12/27 职场文书
北体毕业生求职信
2014/02/28 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers