ExtJS 下拉多选框lovcombo

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

赞 (0)

相关推荐

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • js表单中选择框值的获取及表单的序列化

    本文特意为js表单中选择框值的获取及表单的序列化做了下总结,写成了一个对象,分享给大家,欢迎大家学习. var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value

  • js表单处理中单选、多选、选择框值的获取及表单的序列化

    本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

  • 基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）

    表单序列化类型的数据是指url传递的数据的格式,形如"key=value&key=value&key=value"这样的key/value的键值对.一般来说使用jQuery的$.fn.serialize函数能达到这样的效果.如何将这样的格式转化为对象? 我们知道使用jQuery的$.fn.serializeArray函数得到的是一个如下结构的对象 [ { name: "startTime" value: "2015-12-02 00:00:

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • javascript判断单选框或复选框是否选中方法集锦

    提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name

  • JQuery SELECT单选模拟jQuery.select.js

    基于jQuery JavaScript Library v1.3.2 的单选模拟 (本文件是跟据 zhangjingwei 的Jquery Select(单选) 模拟插件 V1.3.4 修改而来的) a. 修改的主要原因是,原来的zhangjingwei的模拟在显示方式上的问题.在跟文字交替出现时会出现错位.现将模拟DIV的display修改为inline方式.更自然的嵌入到文本行中. b.在加载文件后自动转化样式名为'commonselect' 的select.简化调用 c.对select的o

  • js获取单选框或复选框值及操作

    复制代码 代码如下: <script> function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; for (i=0;i<objarray;i++) {//欢迎来到我们,我们的网址是www.jb51.net,很好记,我们,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. if(st

  • ExtJS Grid使用SimpleStore、多选框的方法

    复制代码 代码如下: ///<reference path="./vswd-ext_2.0.2.js" /> Ext.onReady(function(){ var data = [ [1,"wilson.fu",10], [2,"wilson.fu2",20], [3,"wilson.fu3",30] ]; var sqldata = new Array() ; for(var i=0;i<10;i++)

  • js select多选列表传值代码

    js select /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i0) { oSelect.remove(ops.le

随机推荐