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 相关文章推荐
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
js使用心得分享
Jan 13 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Vue实现圆环进度条的示例
Feb 06 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
对javascript和select部件的结合运用
2006/10/09 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python 快速排序代码
2009/11/23 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python调用自定义函数的实例操作
2019/06/26 Python
200行python代码实现2048游戏
2019/07/17 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
暑期实践个人总结
2015/03/06 职场文书
团结主题班会
2015/08/13 职场文书