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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue实现员工信息录入功能
Jun 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/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
js页面加载后执行的几种方式小结
2020/01/30 Javascript
js实现小时钟效果
2020/03/25 Javascript
python的多重继承的理解
2017/08/06 Python
Python中int()函数的用法浅析
2017/10/17 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python读取并写入mat文件的方法
2019/07/12 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
护士自荐信范文
2013/12/15 职场文书
詹天佑教学反思
2014/04/30 职场文书
迎国庆横幅标语
2014/10/08 职场文书
小学四年级作文之写景
2019/08/23 职场文书