ExtJS 下拉多选框lovcombo_javascript技巧

开始以为很简单,在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
{
//未选中
}
}

时间: 2024-11-18 22:34:00

ExtJS 下拉多选框lovcombo_javascript技巧的相关文章

extjs4-Extjs4下拉多选框提交所有值问题源码步骤

问题描述 Extjs4下拉多选框提交所有值问题源码步骤 看了一些网上的关于Extjs多选下拉,但是都是老版本的,4.0以上版本的找不到合适的用 求给一个4.0的可用的 多选下拉的 案例 解决方案 combobox配置multiSelect为true就行了http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.ComboBox-cfg-multiSelect

我想做个这样的下拉复选框,如何实现

问题描述 我想做个这样的下拉复选框,如何实现 解决方案 select无法实现你这种功能,需要用js来模拟.. 多选的:http://www.veryhuo.com/down/html/jquery-multiselect.html 单选:http://www.51xuediannao.com/js/jquery/select2.html 解决方案二: 建议找js插件实现, 解决方案三: 必须要使用插件吗? 我在以前的一家公司是这样的代码,平时也没注意过样式问题,帮分析下吧 multiple='m

值提交-下拉多选框提交所有值问题

问题描述 下拉多选框提交所有值问题 我要做的一个功能,就是一开始就是提交下拉多选框里所有的值,如图: 如图,右边下拉框里所有的值全部要提交,而且还要按当前顺序提交不能打乱顺序,所以我本来是用的隐藏的radio选中获取值的,可是那样提交的值是按照id 的顺序来的,不是选择的顺序,不和需求,所以不可以. 后来在网上搜索,写JS 在页面离开之前,选中右边下拉框里所有的值. $($(".tab").find("option[value!='-1']")).attr(&quo

在jquery repeater中添加设置日期,下拉,复选框等控件_实用技巧

如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater. 示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar 本文将详细的讲解 Repeater 控件的模板中如何处理控件, 目录如下: * 准备 * html 元素 * 文本框 * 下拉框 * 多行文本框 * 复选框 * jQueryUI 插件 * jQueryUI 日期框 * jQueryUI 按钮 * jQueryUI 自动匹配 示例图

jQuery 下拉多选框的使用方法

效果图 一.基本属性 1.全选和全不选,如效果图中第3部分 checkAllText 默认值:check all uncheckAllText 默认值:uncheck all $("select").multiselect({ checkAllText: "全选", uncheckAllText:"全不选" }); 2.选中项的提示信息,如图中第2部分 selectedText 默认:# selected $("select"

javascript实现下拉提示选择框_javascript技巧

本文介绍了select和sugget结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的:   1.首先需要引入如下文件 <link href="select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-2.1.4.min.js"></script>

Extjs 点击复选框在表格中增加相关信息行_javascript技巧

功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 var $provinceCheckbox01 = new Ext.form.CheckboxGroup({ xtype: 'checkboxgroup', fieldLabel: '省份选择', labelWidth: 60, columns: 9, vertical: true, margin: '

下拉数字选择框,弹出一个计算器的界面编程问题

问题描述 下拉数字选择框,弹出一个计算器的界面编程问题 窗体编程文本框控件如何关联一个下拉数字选择框,弹出计算器键盘的界面,输入后累加到文本框? 解决方案 有专门的第三方控件可以实现这个效果:http://download.csdn.net/download/xinnianle/1339962 解决方案二: 我知道日历复选框很方便,但是下拉计算器框框的话,如果找不到可以考虑手都写代码添加.比如走一个按钮,点击后弹出一个计算器,计算器添加一个按钮,计算完成后自动将结果发送给文本框,然后有文本框的内

VB中能不能做下拉数字选择框,带有一个计算器界面

问题描述 VB中能不能做下拉数字选择框,带有一个计算器界面 VB中能不能做下拉数字选择框,带有一个计算器界面,有点类似电话拨号盘的效果?请问怎么实现? 解决方案 有一个第三方控件可以支持,http://download.csdn.net/download/xinnianle/1339962