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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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学习笔记之二 php入门知识
2011/01/12 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
php新建文件的方法实例
2019/09/26 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python实现银行实战系统
2020/02/26 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
酒吧员工的岗位职责
2013/11/26 职场文书
书法培训心得体会
2014/01/05 职场文书
数控个人求职信范文
2014/02/03 职场文书
班主任新年寄语
2014/04/04 职场文书
师德演讲稿范文
2014/05/06 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
库房管理员岗位职责
2015/02/12 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书