ExtJS 下拉多选框lovcombo


Posted in Javascript onMay 19, 2010

开始以为很简单,在option里加个input checkbox就行了。哪知行不通,网上搜了一些实现方法,主要是用div层来模拟下拉。本想照着这种思路,再结合这个项目具体应用自己写一个,发现太麻烦了。刚好在另外一个项目中使用extjs,找到了一个扩展lovcombo,学习了一下它自带的例子(配合2.3版的extjs,3.x版的貌似有问题)。例子倒不难,关键是要把它添加到现有的代码中,并且尽量少的改动原有代码。

下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一个需要注意的小地方是:一个选项被select时,需要额外的通过checkField的值来判断该选项是被选中还是被取消。还有就是全选、取消全选(这两个lovcombo自带有方法selectAll和deselectAll)以及被选中选项数目(需要遍历一遍store,并检测每一项的checkField值)。

//下拉框的select事件 
select:function(combo, record, index) 
{ 
//选中 
if(record.get(this.checkField)) 
{ 
//选中时的处理逻辑 
} 
else 
{ 
//未选中 
} 
}
Javascript 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
javascript 得到变量类型的函数
May 19 #Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 #Javascript
js 复制或插入Html的实现方法小结
May 19 #Javascript
15 个 JavaScript Web UI 库
May 19 #Javascript
JavaScript 以对象为索引的关联数组
May 19 #Javascript
JavaScript 语言的递归编程
May 18 #Javascript
JS 树形递归实例代码
May 18 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
非常好的php目录导航文件代码
2006/10/09 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
php常用数组函数实例小结
2016/12/29 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
Javascript实现字数统计
2015/07/03 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
python RSA加密的示例
2020/12/09 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
个人简历自荐信
2014/06/26 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
农业项目合作意向书
2015/05/08 职场文书
法人身份证明书
2015/06/18 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js