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 动态改变图片大小
Jun 11 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue Element校验validate的实例
Sep 21 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP简单日历实现方法
2016/07/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php中上传文件的的解决方案
2018/09/25 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
Js切换功能的简单方法
2010/11/23 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
AngularJS中$http的交互问题
2017/03/29 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现多属性排序的方法
2018/12/05 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
关于逃课的检讨书
2014/01/23 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
法制宣传实施方案
2014/03/13 职场文书
公司募捐倡议书
2014/05/14 职场文书
演讲稿的写法
2014/05/19 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
企业介绍信范文
2015/01/30 职场文书
工作会议通知
2015/04/15 职场文书