Ext下拉 ComboBox多选拓展代码(超好用)

原创 2016年08月30日 14:34:09
var multiSelect=  Ext.define('Ext.ux.MultiComboBox',
            extend: 'Ext.form.ComboBox',
            xtype: 'multicombobox',
            id:'Select',
            name:'Select',
            fieldLabel:'标题',
            labelWidth: 150,
            width:350,
            labelAlign : 'left',
      //      store:getDicStore('DIC'),//数据源
            displayField: 'text',
            valueField: 'value',
            mode: 'local',
            initComponent: function(){
                this.multiSelect = true;
                this.listConfig = {
                    itemTpl : Ext.create('Ext.XTemplate',
                        '<input type=checkbox>{text}'),
                    onItemSelect: function(record) {
                        var node = this.getNode(record);
                        if (node) {
                            Ext.fly(node).addCls(this.selectedItemCls);


                            var checkboxs = node.getElementsByTagName("input");
                            if(checkboxs!=null)
                            {
                                var checkbox = checkboxs[0];
                                checkbox.checked = true;
                            }
                        }
                    },
                    listeners:{
                        itemclick:function(view,  item){
                            var isSelected = view.isSelected(item);
                            var checkboxs = item.getElementsByTagName("input");
                            if(checkboxs!=null)
                            {
                                var checkbox = checkboxs[0];
                                if(!isSelected)
                                {
                                    checkbox.checked = true;
                                }else{
                                    checkbox.checked = false;
                                }
                            }
                        }
                    }
                }
                this.callParent();
            }
        });
感谢众多网络上资料作者的提供的内容,经过多次改造试验好用了,感谢!

[Ext JS 4] 实战之多选下拉单 (带checkbox)

Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了。 但是如果要在每个下拉之前加上一个checkbox, 如...
  • oscar999
  • oscar999
  • 2013年09月26日 15:00
  • 13665

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单。 但是实际项目开发过程中, 用户的需求也是不断精进的。 使用淘宝或是其他...
  • oscar999
  • oscar999
  • 2014年12月12日 08:01
  • 6427

学习笔记-extjs3.4 下拉多选框

原先做的时候,在网上找了很多例子,最后定下了LovCombo这个扩展例子,比较好看,而且稳定性强一些,暂时还没发现什么bug,先贴张图看看效果。        作为多选的时候,会是一种很好的选择,下面...
  • liyang_hawk
  • liyang_hawk
  • 2013年09月11日 14:03
  • 4292

ext 下拉多选树

ext4 下拉树 下拉表格组件引用和调用
  • xiaogg3678
  • xiaogg3678
  • 2016年06月17日 14:16
  • 719

Ext.form.ComboBoxTree 下拉树 下拉多选树

源代码:  2012年7月27日更新 修复了选择后通过getValue无法获取值的bug. /** * @author 哈哈的快 QQ:20151481 * @link http://bl...
  • hahadekuai
  • hahadekuai
  • 2012年07月20日 22:39
  • 13279

关于easyui combobox下拉框实现多选框的实现

好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈      好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台...
  • u012027337
  • u012027337
  • 2016年12月29日 15:14
  • 16499

Ext Js -- 多选下拉框

今天客户需要做一个多选下拉列表,当然就需要扩展组建,网上收了下,果然好多,转载一篇[http://blog.sina.com.cn/s/blog_5140a6a50100bfao.html],简要记录...
  • xiaocha2008
  • xiaocha2008
  • 2011年11月08日 21:30
  • 11716

Extjs之多选下拉框(MultiSelect)

扩展js类库,在项目中建立一个 js文件,命名为:xxx.js  其代码为: if ('function' !== typeof RegExp.escape) { RegExp.escap...
  • SJF0115
  • SJF0115
  • 2014年03月05日 17:08
  • 26567

combobox实现下拉多选的终结解决方案

 前段时间自己在公司负责将web下的一些自己的控件转换为 winform模式下。其实对于C/S的开发自己不是很熟悉,但是新员工嘛,没办法,硬着头皮扛下了。接下来就是不断去学习和研究,今天在做多选下拉菜...
  • awen_q
  • awen_q
  • 2009年07月05日 15:22
  • 5579

Extjs 2.3 的多选框控件 muiltiCombox

在制作报表的查询条件时,需要有多选下拉框,Ext 2.3默认没有实现。找来参考资料1的代码测试,发现当有多个多选下拉框时,会有数据混乱不能选择的情况。对其中源码进行了修正,现在可以正常使用。主要修改了...
  • rootcn
  • rootcn
  • 2013年02月01日 09:18
  • 4296
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ext下拉 ComboBox多选拓展代码(超好用)
举报原因:
原因补充:

(最多只允许输入30个字)