Extjs5实现带复选框的多选下拉选，复选框用extjs提供的checkbox样式

因为网上现有的代码只是实现了复选框效果，在我把窗口关闭后，再打开，复选框还保留着上次的选中状态，因为有这个bug，所以自己把网上的代码给改进了下，加入了未选中事件和用extjs的样式，先上效果图
看着不错吧，这种复选框用的就是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',
                    '<div class="x-field x-form-item x-form-item-default x-form-type-checkbox  x-toolbar-item x-field-default x-hbox-form-item x-form-dirty" ><div  data-ref="bodyEl" class="x-form-item-body x-form-item-body-default x-form-cb-wrap x-form-cb-wrap-default  "><div class="x-form-cb-wrap-inner x-form-cb-wrap-inner-no-box-label" role="presentation"><input type="button"  data-ref="inputEl" role="checkbox" tabindex="0" class="x-form-field x-form-checkbox x-form-checkbox-default x-form-cb x-form-cb-default " autocomplete="off" hidefocus="true"></div></div><label data-ref="labelEl" class="x-form-item-label x-form-item-label-default  x-unselectable" style="padding-right:5px;width:105px;"><span class="x-form-item-label-inner x-form-item-label-inner-default" style="width:100px">&nbsp;{[values.' + this.displayField + ']}</span></label></div>'),
            onItemSelect: function(record) {
                var node = this.getNode(record);
                if (node) {
                    //添加选中行的蓝色样式
                    Ext.fly(node).addCls(this.selectedItemCls);
                    var checkboxs = node.getElementsByTagName("div");
                    if (checkboxs != null)
                    {
                        var checkbox = checkboxs[0];
                        checkbox.className = 'x-field x-form-item x-form-item-default x-form-type-checkbox  x-toolbar-item x-field-default x-hbox-form-item x-form-cb-checked x-form-dirty';
                    }
                }
            },
            onItemDeselect: function(record) {
                var node = this.getNode(record);
                if (node) {
                     //去掉选中行的蓝色样式
                    Ext.fly(node).removeCls(this.selectedItemCls);
                    var checkboxs = node.getElementsByTagName("div");
                    if (checkboxs != null)
                    {
                        var checkbox = checkboxs[0];
                        checkbox.className = 'x-field x-form-item x-form-item-default x-form-type-checkbox  x-toolbar-item x-field-default x-hbox-form-item x-form-dirty';
                    }
                }
            },
            listeners: {
                itemclick: function(view, record, item, index, e, eOpts) {
                    var isSelected = view.isSelected(item);
                    var checkboxs = item.getElementsByTagName("div");
                    if (checkboxs != null)
                    {
                        var checkbox = checkboxs[0];
                        if (!isSelected)
                        {
                            checkbox.className = 'x-field x-form-item x-form-item-default x-form-type-checkbox  x-toolbar-item x-field-default x-hbox-form-item x-form-cb-checked x-form-dirty';
                        } else {
                            checkbox.className = 'x-field x-form-item x-form-item-default x-form-type-checkbox  x-toolbar-item x-field-default x-hbox-form-item x-form-dirty';
                        }
                    }
                }
            }
        }
        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: "请选择..."
                });

这样就完成了！第一次写博客，希望大家多多支持，有什么不明白的地方互相探讨。