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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
vue2.x数组劫持原理的实现
Apr 19 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHPThumb图片处理实例
2014/05/03 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
python批量提取word内信息
2015/08/09 Python
python发送邮件实例分享
2017/07/28 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python2 与python3的print区别小结
2018/01/16 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python猴子补丁知识点总结
2020/01/05 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python如何调用字典的key
2020/05/25 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python数据抓取3种方法总结
2021/02/07 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
物流创业计划书
2014/02/01 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
开展读书活动总结
2014/06/30 职场文书
电影建国大业观后感
2015/06/01 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python