View Full Version : Modern 7.1 - Combobox - remote - multiselect

13 Mar 2020, 6:06 AM
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.

14 May 2020, 7:52 PM
Ext.define('ModernApp.view.home.TagField', {
extend: 'Ext.field.ComboBox',
xtype: 'tagfield',

onCollectionAdd:function(valueCollection, adds) {
// 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) {

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){
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: {
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){
var me= this;
if (me.expanded) {
updateMultiSelect: function(multiSelect) {
var me = this,
picker = me.getConfig('picker', false, true),
chipView = me.chipView,
valueCollection = me.getValueCollection(),
selection = valueCollection.last(),

if (multiSelect) {
if (chipView) {
else {
// Create the ChipView from the lazy config.

// 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

// Convert our selection into an array.
if (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);

// 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();
// 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.