Блог

Как я могу предотвратить одновременный выбор более одного тега в поле тегов ExtJS Sencha? Я также хочу, чтобы был выбран только один, и как только элемент выбран, он останется выбранным. Когда я устанавливаю multiSelect: false, если я вставляю новые элементы в элемент управления, я получаю сообщение об ошибке.

Это ошибка с примером. Если вы нажмете клавишу Shift, вы сможете выбрать более одного. Я хочу, чтобы был выбран только один.

     Ext.application({
    name : 'Fiddle',

    launch : function() {
        var shows = Ext.create('Ext.data.Store', {
            fields: ['id','show'],
            data: [
                {id: 1, show: 'Tag 1'},
                {id: 2, show: 'Tag 2'},
                {id: 3, show: 'Tag 3'}
            ]
        });

        Ext.create('Ext.window.Window', {
            //renderTo: Ext.getBody(),
            title: 'Tagfield Test',
            height: 200,
            width: 500,
            layout: 'fit',
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Pick a tag',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                minWidth: 300,
                maxWidth: 200,
                maxHeight: 10
            }]
        }).show();
    }
});
  

https://fiddle.sencha.com/#view/editoramp;fiddle/38o7

Два тега, выбранных одновременно

Добавьте конфигурацию в поле вашего тега…

Множественный выбор: false

https://docs.sencha.com/extjs/7.2.0/classic/Ext.form.field.Tag.html#cfg-multiSelect

Измените режим модели выбора после рендеринга поля тега:

 Ext.application({
    name : 'Fiddle',

    launch : function() {
        var shows = Ext.create('Ext.data.Store', {
            fields: ['id','show'],
            data: [
                {id: 1, show: 'Tag 1'},
                {id: 2, show: 'Tag 2'},
                {id: 3, show: 'Tag 3'}
            ]
        });

        Ext.create('Ext.window.Window', {
            //renderTo: Ext.getBody(),
            title: 'Tagfield Test',
            height: 200,
            width: 500,
            layout: 'fit',
            items: [{
                xtype: 'tagfield',
                fieldLabel: 'Pick a tag',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                minWidth: 300,
                maxWidth: 200,
                maxHeight: 10,
                // Change selection model mode after render.
                listeners: {
                    afterrender: function(tagField) {
                        tagField.selectionModel.setSelectionMode('SINGLE');
                    }
                }
            }]
        }).show();
    }
});