Как добавить функцию multiselect shift + click в extjs combobox

Question

Как добавить функцию мультиплекса shift plus в extjs combobox?

Answer 1

Это будет работать для ExtJS 5.1.3/6.0.2/6.2.0
Fiddle: https://fiddle.sencha.com/#fiddle/1jhv

Ext.define('Combo',{ 
    override: 'Ext.form.field.ComboBox', 
    onBindStore: function(store, initial) { 
     var me = this, 
      picker = me.picker, 
      extraKeySpec, 
      valueCollectionConfig; 

     if (store) { 
      if (store.autoCreated) { 
       me.queryMode = 'local'; 
       me.valueField = me.displayField = 'field1'; 
       if (!store.expanded) { 
        me.displayField = 'field2'; 
       } 

       if (me.getDisplayTpl().auto) { 
        me.setDisplayTpl(null); 
       } 
      } 
      if (!Ext.isDefined(me.valueField)) { 
       me.valueField = me.displayField; 
      } 

      extraKeySpec = { 
       byValue: { 
        rootProperty: 'data', 
        unique: false 
       } 
      }; 
      extraKeySpec.byValue.property = me.valueField; 
      store.setExtraKeys(extraKeySpec); 

      if (me.displayField === me.valueField) { 
       store.byText = store.byValue; 
      } else { 
       extraKeySpec.byText = { 
        rootProperty: 'data', 
        unique: false 
       }; 
       extraKeySpec.byText.property = me.displayField; 
       store.setExtraKeys(extraKeySpec); 
      } 

      valueCollectionConfig = { 
       rootProperty: 'data', 
       extraKeys: { 
        byInternalId: { 
         property: 'internalId' 
        }, 
        byValue: { 
         property: me.valueField, 
         rootProperty: 'data' 
        } 
       }, 
       listeners: { 
        beginupdate: me.onValueCollectionBeginUpdate, 
        endupdate: me.onValueCollectionEndUpdate, 
        scope: me 
       } 
      }; 


      me.valueCollection = new Ext.util.Collection(valueCollectionConfig); 

      me.pickerSelectionModel = new Ext.selection.DataViewModel({ 
       mode: me.multiSelect ? me.enableShiftSelect ? 'MULTI' : 'SIMPLE' : 'SINGLE', 
       ordered: true, 
       deselectOnContainerClick: false, 
       enableInitialSelection: false, 
       pruneRemoved: false, 
       selected: me.valueCollection, 
       store: store, 
       listeners: { 
        scope: me, 
        lastselectedchanged: me.updateBindSelection 
       } 
      }); 

      if (!initial) { 
       me.resetToDefault(); 
      } 

      if (picker) { 
       me.pickerSelectionModel.on({ 
        scope: me, 
        beforeselect: me.onBeforeSelect, 
        beforedeselect: me.onBeforeDeselect 
       }); 

       picker.setSelectionModel(me.pickerSelectionModel); 

       if (picker.getStore() !== store) { 
        picker.bindStore(store); 
       } 
      } 
     } 
    } 
}); 

Затем создать выпадающий с enableShiftSelect: true и multiSelect: true.

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data : [ 
     {"abbr":"AL", "name":"Alabama"}, 
     {"abbr":"AK", "name":"Alaska"}, 
     {"abbr":"AZ", "name":"Arizona"} 
    ] 
}); 

// Create the combo box, attached to the states data store 
Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose State', 
    store: states, 
    queryMode: 'local', 
    displayField: 'name', 
    valueField: 'abbr', 
    enableShiftSelect: true, 
    multiSelect: true, 
    renderTo: Ext.getBody() 
});