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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
js微信分享实现代码
Oct 11 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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 特殊字符处理函数
2008/09/05 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP静态成员变量
2017/02/14 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python处理中文标点符号大集合
2018/05/14 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python飞机大战游戏实例讲解
2020/12/04 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
大学生四个方面的自我评价
2013/09/19 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
项目负责人任命书
2014/06/04 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL