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

前言

Ext js 创建一个多选下拉单的方式很简单， 使用Ext.form.ComboBox， 设置 multiSelect 为true 就可以了。

但是如果要在每个下拉之前加上一个checkbox， 如何实现呢？

ComboBox本身没有这样的配置，

有一个 “Ext.ux.form.MultiSelect” 这样一个扩展， 效果的话，是把选项全部显示出来。

没办法只能自己扩展一个这样的组件了。

界面实现

要实现这样的显示，可以使用ComboBox 的listConfig 这个配置。

可以配置listConfig的itemTpl来显示每个选项的显示效果，

Ext.define('Ext.ux.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}'),        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();    }});