Results 1 to 2 of 2

Thread: Modern 7.1 - Combobox - remote - multiselect

  1. #1
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    6

    Default Modern 7.1 - Combobox - remote - multiselect

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

    Code:
    {
      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.

  2. #2

    Default

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •