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 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JavaScript实现简单计算器
Mar 19 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 whois查询类定义与用法示例
2019/04/03 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python中join和split用法实例
2015/04/14 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python生成任意频率正弦波方式
2020/02/25 Python
python 8种必备的gui库
2020/08/27 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
领导检查欢迎词
2014/01/14 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
教师党员个人整改措施
2014/10/27 职场文书
英语复习计划
2015/01/19 职场文书
以权谋私检举信范文
2015/03/02 职场文书
个人更名证明
2015/06/23 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2019个人工作总结
2019/06/21 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
HTML基本元素标签介绍
2022/02/28 HTML / CSS