Extjs5实现带复选框的多选下拉选，复选框用html本身的checkbox控件

最新推荐文章于 2023-06-17 22:16:18 发布

昨日情书

最新推荐文章于 2023-06-17 22:16:18 发布

阅读量1.2k

点赞数 2

分类专栏： Exjts 文章标签： checkbox extjs 多选下拉选复选框

本文链接：https://blog.csdn.net/hanzi198511/article/details/52572600

版权

Exjts 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

上一篇文章用的是Extjs提供的样式效果，可能会因为extjs的版本不同而导致css样式代码的不同，这篇文章用html本身的checkbox控件实现，通用性更好一些，效果图
这里写图片描述
这种方式实现的复选框看着比extjs的小一些，首先新创建个MultiSelect.js文件，代码如下

Ext.define('Ext.form.MultiSelect', {  
    extend: 'Ext.form.ComboBox',  
    alias: 'widget.multicombobox',  
    xtype: 'multicombobox',  
    initComponent: function(){  
        this.multiSelect = true;  
        this.listConfig = {  
              itemTpl : Ext.create('Ext.XTemplate',  
                    '<input type=checkbox>{[values.' + this.displayField + ']}'),  
              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;  
                     }  
                  }  
              },  
              onItemDeselect: function(record) {
                var node = this.getNode(record);
                if (node) {
                    Ext.fly(node).removeCls(this.selectedItemCls);

                    var checkboxs = node.getElementsByTagName("input");
                    if (checkboxs != null)
                    {
                        var checkbox = checkboxs[0];
                        checkbox.checked = false ;
                    }
                }
            },
              listeners:{  
                  itemclick:function(view, record, item, index, e, eOpts ){  
                      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();  
    }  
});

然后在正式使用的jsp引入这个js，因为我是放到common下面了，所以路径是这样的

 <script src="../js/common/MultiSelect.js"></script>

jsp使用代码，只需要把用Ext.form.MultiSelect替换Ext.form.MultiSelect即可，代码如下

var roleComboBox = Ext.create('Ext.form.MultiSelect', {
                    fieldLabel: '选择角色',
                    store: roleComboStore,
                    queryMode: 'local',
                    multiSelect: true,
                    valueField: 'roleId',
                    displayField: 'roleName',
                    id: 'roleList',
                    name: 'roleList',
                    // allowBlank: false,
                    editable: false,
                    emptyText: "请选择..."
                });