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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jQuery的position()方法详解
Jul 19 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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
MYSQL环境变量设置方法
2007/01/15 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php微信开发之关注事件
2018/06/14 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
javascript中 try catch用法
2015/08/16 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
利用Python实现Windows定时关机功能
2017/03/21 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
css3学习心得分享
2013/08/19 HTML / CSS
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
秋季运动会表扬稿
2014/01/16 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
基层工作经历证明
2015/06/19 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Linux安装apache服务器的配置过程
2021/11/27 Servers