javascriptextjsmulti-selectextjs6extjs6-modern

Extjs modern toolkit 6.5.2 Triton binding Multiselect field


I'm trying to simulate in modern toolkit the tagfield that existed in classic toolkit, I found two ways to do it :

https://github.com/facilitiesexchange/TagField/

AND

ExtJs 6 Modern toolkit Multiselect field

I used both in this way :

{
    xtype:'multiselectfield', //tagfield
    multiSelect: true,
    displayField: 'name',
    required: true,
    store: [
        { name: 'Peter',  age: 26 },
        { name: 'Ray',   age: 21 },
        { name: 'Egon', age: 24 },
        { name: 'Winston', age: 24 }
     ],
    label : 'People'
}

The first custom-field worked for displaying the data from my store but I didn't get binding the selected values.

The second throwed some errors and when a fixed them It didn't displayed any values from my store at all, so I didn't have the chance to bind the selected values.

So I would like to know how to bind the selected values in a multiselectfield with my viewModel. Here is my fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2lf0


Solution

  • Is with selected like :

    {
       xtype: 'tagfield',
       itemId: 'tagfield',
       multiSelect : true,
       displayField: 'name',
       valueField: 'id',
       bind: {
           label: '{i18n.topic.topics} ',
           store: '{topics}',
           selected: '{record.topics}'
       },
    }