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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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环境搭建最新方法
2006/09/05 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
BootStrap数据表格实例代码
2017/09/13 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
python实现朴素贝叶斯分类器
2018/03/28 Python
Python生成器generator用法示例
2018/08/10 Python
Python列表与元组的异同详解
2019/07/02 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python