extjs下拉框添加复选框

给ComboBox组件配置listConfig

下拉框代码：

var gyslxcm = Ext.create('Ext.form.field.ComboBox',{
        id            : 'gyslxcm',
        store         : gyslxstore,
        multiSelect : true,
        editable      : false,
        xtype         : 'textfield',
        allowBlank    : true,
        displayField  : 'mingc',
        valueField    : 'mingc',
        queryMode: 'local',
        listConfig: {
            itemTpl: '<tpl for="."><div class="x-combo-list-item" onClick=""><span><input type="checkbox" id="cb{[values.id]}" name="cb{[values.id]}" value="{[values.id]}" />{mingc}</span></div></tpl>',
            listeners: {
                itemclick:function(view, record, item, index, e, eOpts ){
                    var checkboxs = item.getElementsByTagName("input");
                    var checkbox = checkboxs[0];
                    if(checkbox != null) {
                        checkbox.checked = !view.isSelected(item);
                    }
                },
                beforeshow: function(combo, eOpts){
                    alert('beforeshow');
                    updateCheckboxState(combo, false, null);
                },
                beforeselect: function(obj, record, eOpts){
                    alert('beforeselect');
                    updateCheckboxState(obj.view, true, record);
                }
            }
        }
    });

更新复选框函数

function updateCheckboxState(combo, isSelectEvent, record){
        if(combo != null){
            var contents = combo.all;
            if(contents != null){
                var elements = contents.elements;
                if(elements.length > 0){
                    for(var i=0; i<elements.length; i++){
                        var element = elements[i];
                        var isSelect = combo.isSelected(element);
                        var checkboxs = element.getElementsByTagName('input');
                        if(checkboxs.length > 0){
                            for(var j=0; j<checkboxs.length; j++){
                                var checkbox = checkboxs[j];
                                if(checkbox != null){
                                    if(!isSelectEvent){//是show事件
                                        checkbox.checked = isSelect;
                                    } else {//是select事件
                                        if(record != null && record.data.id == checkbox.value){
                                            checkbox.checked = true;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

我的下拉框是放在grid里面使用的，首次加载时执行完beforeshow事件后还会执行beforeselect事件，这样就会把之前复选框选中状态刷掉，所以又在beforeselect事件里面加了一段代码用来表示当执行beforeselect事件时更新复选框状态，这里执行beforeselect事件时只有当下拉框项是被选中的状态才会执行，否则不会执行。当再次点击下拉框时也不会在执行beforeselect事件，只有首次加载时才会执行。