如何防止在ExtJs Sencha标签字段上一次选择多个标签？

问题描述

如何防止在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/editor&fiddle/38o7

Two tags selected at the same time

解决方法

在标签字段上添加配置...

multiSelect：虚假

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

,

呈现tagField后更改选择模型模式：

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();
    }
});