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 arguments.callee的应用代码
May 07 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
禁止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中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python gdal安装与简单使用
2019/08/01 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
爱情保证书范文
2014/02/01 职场文书
新文化运动的基本口号
2014/06/21 职场文书
家长会欢迎标语
2014/06/24 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
班主任寄语2016
2015/12/04 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python