Extjs modern toolkit 6.5.2 Triton binding Multiselect field

Question

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

Answer 1

Is with selected like :

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