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 采用delete实现继承示例代码
May 20 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
js实现复制粘贴的两种方法
Dec 04 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 第二节 数据类型之数值型
2012/04/28 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
理解javascript异步编程
2016/01/27 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中的默认参数详解
2015/06/24 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python函数与方法的区别总结
2019/06/23 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Python Selenium截图功能实现代码
2020/04/26 Python
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
SQL面试题
2013/04/30 面试题
机关门卫的岗位职责
2014/04/29 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
python字典的元素访问实例详解
2021/07/21 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
nginx常用配置conf的示例代码详解
2022/03/21 Servers
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫