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让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 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
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
调整PHP的性能
2013/10/30 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
ionic3 懒加载
2017/08/16 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python服务器端收发请求的实现代码
2014/09/29 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python hook监听事件详解
2018/10/25 Python
python DataFrame 取差集实例
2019/01/30 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
.net C#面试题
2012/08/28 面试题
自荐书模板
2013/12/19 职场文书
课程改革实施方案
2014/03/16 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
亲戚关系证明
2015/06/24 职场文书
入党申请书格式
2019/06/20 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书