Extjs 4 带checkbox框的下拉多选选框

最新推荐文章于 2025-07-10 14:17:34 发布

原创最新推荐文章于 2025-07-10 14:17:34 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Extjs中实现Checkbox下拉框组件，包括使用Ext.form.field.ComboBox和Ext.XTemplate组件来构建，并提供了封装自定义组件的方法，以便在项目中重复使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

Extjs 有着丰富的组件，但是在API里面却没有直接写好的checkbox下拉框组件，这个时候对于新手来说可能有点蒙了，但是在好好看看Extjs的API后我们不难发现，我们可以通过自己设计拼装出checkbox下拉框主键（所有组件都一样的，都是在基本组件的基础上拼装而成的）。

我们通过两个组件得到我们想要的checkbox下拉框：

1. Ext.form.field.ComboBox 下拉框组件

2. Ext.XTemplate 模板组件

其实，在combo组件的配置项中我们就可以看到，combo是支持使用XTemplate的，所以下拉框我们就可以用combo而checkbox则用XTemplate自己写就可以了。

{
   xtype: 'combo',
   name: 'status',
   id: 'statusId',
   multiSelect: true,
   editable: false,
   emptyText: justsyLang.strategyExecutionStatus, //'策略执行状态',
   queryMode: 'local',
   store: status,
   valueField: 'id',
   displayField: 'name',
   listConfig: {
       itemTpl: '<tpl for="."><div class="x-combo-list-item"><span>  {name}</span></div></tpl>',
   },
   queryMode: 'local',
   triggerAction: 'all',
},

备注：multiSelect 默认为false表示单选，如果需要支出多选则设置为true。

从上面我们就可以得到一个简单的checkbox了，但是这样的checkbox是不完美的，在做选择的时候点击checkbox框和点击下拉内容都表示选择了该项，但是只有点击checkbox的时候checkbox才表现出选中的效果，所以我们需要给他添加一些方法，保证checkbox的打钩和没打钩表现出选中和未选中的统一性；

//在listConfig中添加下面的方法
 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;
                  }
               }

这样总有让一个简单的checkbox成型了。

可能在项目中，我们对checkbox下拉框的需求量较大，这样的话，我们就可以直接把checkbox下拉框做出一个自己封装的组件的形式存在，这样就不需要重复的写了，每次需要的时候只用通过xtype调用就可以了。

ps:下面直接写成组件形式的代码引用自网络，自己就一个地方用到也就没刻意的去写了

Ext.define('MDM.view.custom.MultiComboBox', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.multicombobox',
    xtype: 'multicombobox',
    initComponent: function(){
        this.multiSelect = true;
        this.listConfig = {
              itemTpl : Ext.create('Ext.XTemplate',
                    '<input type=checkbox>{value}'),//这边value的要改成下拉框显示所对应的displayField字段，例如：values。name
              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, 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();
    }
});

在下拉框中想要默认显示动态数据，可以在下拉框添加监听事件

{
		xtype:'multicombobox',
		columnWidth :1,
		fieldLabel : '商务人员',
		margin : '10 20 10 0',
		labelAlign:"right",
//		allowBlank: false,
		id:'modifyProjectDetailsFieldBusinessPeopleId',
		store : businessPeopleStore,
		triggerAction: 'all',
		displayField: "name", 
		valueField: "id", 
		editable: false,
		multiSelect:true,
		listeners:{
			afterRender : function(combo) {
				var supplierselection = Ext.getCmp('crgridqw').getSelectionModel().getSelection();
				firstValue = supplierselection[0].data.businessPeopleName
				combo.setValue(firstValue);//可以使用setValue进行数据的显示，如果要显示固定数据可以直接写死，或者添加默认属性，显示
			}
		}
	}

本文主要转载于： http://shimengwen.blog.51cto.com/2448562/1360820