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 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Vue组件实现触底判断
Jun 26 Javascript
JS array数组检测方式解析
May 19 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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 SQL防注入代码集合
2008/04/25 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python列表生成器的循环技巧分享
2015/03/06 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python实现计算器功能
2019/10/31 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
拓展训练激励口号
2014/06/17 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书