Hi I am trying to put a checkbox inside a combo box . I want to select all the values as default but I am not getting the desired result.Below is my code

Code:
Ext.define('Ext.ux.CheckCombo', 
   { 
       extend: 'Ext.form.field.ComboBox', 
       alias: 'widget.checkcombo', 
       multiSelect: true, 
       allSelector: false,
       addAllSelector: false,
       allText: 'All', 
       createPicker: function() { 
           var me = this, 
               picker, 
               menuCls = Ext.baseCSSPrefix + 'menu', 
               opts = Ext.apply({ 
                   pickerField: me, 
                   selModel: { 
                       mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
                   },
                   floating: true, 
                   hidden: true, 
                   ownerCt: me.ownerCt, 
                   cls: me.el.up('.' + menuCls) ? menuCls : '', 
                   store: me.store, 
                   displayField: me.displayField, 
                   focusOnToFront: false, 
                   pageSize: me.pageSize, 
                   tpl:  
               [ 
                   '<ul><tpl for=".">', 
                       '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker">&nbsp;</span> {' + me.displayField + '}</li>', 
                   '</tpl></ul>' 
               ] 
               }, me.listConfig, me.defaultListConfig); 
    
           picker = me.picker = Ext.create('Ext.view.BoundList', opts); 
           if (me.pageSize) { 
               picker.pagingToolbar.on('beforechange', me.onPageChange, me); 
           }         
    
           me.mon(picker, { 
               itemclick: me.onItemClick, 
               refresh: me.onListRefresh, 
               scope: me 
           }); 
    
           me.mon(picker.getSelectionModel(), { 
               'beforeselect': me.onBeforeSelect, 
               'beforedeselect': me.onBeforeDeselect, 
               'selectionchange': me.onListSelectionChange, 
               scope: me 
           }); 
    
           return picker; 
       }, 
       getValue: function() 
       { 
               return this.value.join(','); 
       }, 
       getSubmitValue: function() 
       { 
           return this.getValue(); 
       }, 
       expand: function() 
       { 
           var me = this, 
               bodyEl, picker, collapseIf; 
    
           if (me.rendered && !me.isExpanded && !me.isDestroyed) { 
               bodyEl = me.bodyEl; 
               picker = me.getPicker(); 
               collapseIf = me.collapseIf; 
    
               // show the picker and set isExpanded flag 
               picker.show(); 
               me.isExpanded = true; 
               me.alignPicker(); 
               bodyEl.addCls(me.openCls); 
    
               if(me.addAllSelector == true && me.allSelector == false) 
               { 
                  me.allSelector = picker.getEl().insertHtml('afterBegin', '<div class="x-boundlist-item" role="option"><span class="x-combo-checker">&nbsp;</span> '+me.allText+'</div>', true);
                   me.allSelector.on('click', function(e) 
                   { 
                       if(me.allSelector.hasCls('x-boundlist-selected')) 
                       { 
                           me.allSelector.removeCls('x-boundlist-selected'); 
                           me.setValue(''); 
                           me.fireEvent('select', me, []); 
                       } 
                       else 
                       { 
                           var records = []; 
                           me.store.each(function(record) 
                           { 
                               records.push(record); 
                           }); 
                           me.allSelector.addCls('x-boundlist-selected'); 
                           me.select(records); 
                           me.fireEvent('select', me, records);  
                       } 
                   }); 
               } 
               // monitor clicking and mousewheel 
               me.mon(Ext.getDoc(), { 
                   mousewheel: collapseIf, 
                   mousedown: collapseIf, 
                   scope: me 
               }); 
               Ext.EventManager.onWindowResize(me.alignPicker, me); 
               me.fireEvent('expand', me); 
               me.onExpand(); 
           } 
       }, 
       onListSelectionChange: function(list, selectedRecords)  
       { 
           var me = this, 
               isMulti = me.multiSelect, 
               hasRecords = selectedRecords.length > 0; 
           // Only react to selection if it is not called from setValue, and if our list is 
           // expanded (ignores changes to the selection model triggered elsewhere)
               console.log(!me.ignoreSelection +"&&"+ me.isExpanded);
           if (!me.ignoreSelection && me.isExpanded) {
            console.log("Inside");
            
               if (!isMulti) { 
                   Ext.defer(me.collapse, 1, me); 
               } 
               /* 
                * Only set the value here if we're in multi selection mode or we have 
                * a selection. Otherwise setValue will be called with an empty value 
                * which will cause the change event to fire twice. 
                */ 
            
               if (isMulti || hasRecords) {
                //Author Exilant : All will be set in combo for all selection  
               if(selectedRecords.length == me.store.getTotalCount()){
                 me.setValue('All', false); 
                }
                else{
                   me.setValue(selectedRecords, false); 
                }
               } 
               if (hasRecords) { 
                   me.fireEvent('select', me, selectedRecords); 
               } 
               me.inputEl.focus(); 
           } 
            
           if(me.addAllSelector == true && me.allSelector != false) 
           { 
               if(selectedRecords.length == me.store.getTotalCount())
                {
                me.allSelector.addCls('x-boundlist-selected'); 
                }
               else me.allSelector.removeCls('x-boundlist-selected');  
           }     
       } 
   }
if (!me.ignoreSelection && me.isExpanded) {

On using !me.ignoreSelection from if condition the combo.setValue() is working fine i.e the set value is showing checked inside combo but the issue coming is , by checking ALL the ALL is not coming in the display field instead the whole value is common by coma separated. But on removing !me.ignoreSelection the setValue is not not working.