Modern 7.1 - Combobox - remote - multiselect

[Luke_]

Hello,
I'm trying setup remote combobox with multiSelect in modern toolkit 7.1 like this:

{
  xtype: 'combobox',
  minChars: 3,
  name: 'articles_test',
  label: 'Articles',
  displayField: 'article_id',
  itemTpl: '<strong>{article_id}</strong> - {article_text}',
  valueField: 'article_text',
  triggerAction: 'query',
  queryMode: 'remote',
  placeholder: 'Search',
  forceSelection: true,
  hideTrigger: true,
  multiSelect: true,
  store: {
    model: 'Myapp.model.mytitles',
    autoLoad: false,
    remoteSort: true,
    remoteFilter: true,
    pageSize: 0
},
  labelWidth: 300
}

In remote store I have for example 1000 articles. When I search in combobox, remote store return 10 and I select one of these. If I search anoter article in same combobox, remote store return different range of articles and first one selected article is lost. I can't select more items from different ranges of articles. Is not usable list all 1000 articles at once. In classics toolkit this works.
What I have wrong?
Thank you.

[kienbk1910]

Ext.define('ModernApp.view.home.TagField', {
extend: 'Ext.field.ComboBox',
xtype: 'tagfield',

onCollectionAdd:function(valueCollection, adds) {
console.log("=>onCollectionAdd")
// Clear the suggestion input upon add of a new selection
if (this.getMultiSelect()) {
this.inputElement.dom.value = '';

// If we were expanded, then release the filter constrains that were
// in place due to the primaryFilter using the inputElement's value.
/* if (this.expanded) {
this.doRawFilter();
}*/
}

var selection = valueCollection.getRange();

// Prevent updateSelection from attempting to mutate the valueCollection
// because we are responding to the valueCollection's own mutation notification.
this.processingCollectionMutation = true;

this.setSelection(this.getMultiSelect() ? selection : selection[0]);
this.processingCollectionMutation = false;
},
onStoreLoad: function(store, records, success) {
if(store.getCount() == 0){
this.collapse();
}
return
},
onStoreDataChanged: function() {},
onStoreRecordUpdated: function() {},
onStoreRefresh: function(store) {},
createFloatedPicker: function() {
var me = this,
multiSelect = me.getMultiSelect(),
result = Ext.merge({
ownerCmp: me,
store: me._pickerStore || me.getStore(),
selectable: {
// selected: me.getValueCollection(),
// selectedRecord: me.getSelection(),
//deselectable: !!multiSelect,
mode: 'single'
},
listeners: {
scope:me,
select: 'onSelectedPicker'
},
itemTpl: me.getItemTpl(),
itemCls: me.getItemCls()
}, me.getFloatedPicker());

// Allow SPACE to navigate unless it's needed
// to edit the inputElement.
result.navigationModel.navigateOnSpace = !me.getEditable();

return result;
},
onSelectedPicker:function( view, selected, eOpts){
console.log('onSelectedPicker');
console.log(selected);
var me= this;
me.getValueCollection().add(selected);
if (me.expanded) {
me.collapse();
}
},
updateMultiSelect: function(multiSelect) {
var me = this,
picker = me.getConfig('picker', false, true),
chipView = me.chipView,
valueCollection = me.getValueCollection(),
selection = valueCollection.last(),
selectable;

if (multiSelect) {
if (chipView) {
chipView.show();
}
else {
// Create the ChipView from the lazy config.
me.getChipView();

// Render in place of the inputElement
me.chipView.render(me.inputWrapElement.dom, me.inputElement.dom);
}

// Append inputElement inside chipview body
// The inputElement floats at the end of the chip items
// by means of its theme flexbox order property being 999999
me.chipView.bodyElement.dom.appendChild(me.inputElement.dom);
me.setInputValue('');

// Convert our selection into an array.
if (selection) {
me.setSelection([selection]);
}
}
else {
if (chipView) {
// Move inputElement back into place in the inputWrap
// before callParent destroys the chipView
me.inputWrapElement.dom.insertBefore(me.inputElement.dom, me.afterInputElement.dom);
chipView.hide();
}

// Cut back our value collection to the last one added.
if (selection) {
valueCollection.splice(0, 1e99, [selection]);
}
}

// Reconfigure the selection model of the picker if it's already been created.
if (picker) {
selectable = picker.getSelectable();
selectable.setConfig({
// deselectable: multiSelect,
mode: 'single'
});
}

me.el.toggleCls(me.multiSelectCls, multiSelect);
},

});

I had the same problem. I have written a new component. It got some bugs. But I think it able to help you.