EXTJS 6.2 禁用标签字段中已选择的标签

Question

在标签字段中，有没有办法防止已选择的标签被删除或禁用它们？我有一个用例，我希望允许用户添加其他标签但不删除任何现有标签。

Answer 1

有一种方法，它需要两个配置：

1. 要通过单击已选定的项目来禁用取消选择，请设置一个

   beforedeselect

   侦听器并从中返回 false 以取消取消选择。
2. 要通过编辑字段并按删除按钮来禁用删除，请将

   editable

   设置为 false。它还需要将

   selectOnFocus

   设置为 false。

您可以考虑其他两个可选配置：

1. 将 `filterPickList^ 设置为 true。这将从选择列表中删除所选项目。
2. 去掉标签右上角的

   x

   触发器。这可以通过将

   tagItemCloseCls

   设置为 null 来完成。右侧会有一些空白 - 如果你想删除它，你需要进一步定制。

把它们放在一起，代码看起来像这样，你可以在 Sencha Fiddle 中尝试：

Ext.application({
    name: 'Fiddle',
    launch: function () {

        var store = Ext.create('Ext.data.Store', {
            fields: ['id', 'name'],
            data: [{
                id: 1,
                name: 'One'
            }, {
                id: 2,
                name: 'Two'
            }, {
                id: 3,
                name: 'Three'
            }, {
                id: 4,
                name: 'Four'
            }, {
                id: 5,
                name: 'Five'
            }, ]
        });

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            title: '"One way" tagfield',
            items: [{
                xtype: 'tagfield',
                store: store,
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                selectOnFocus: false,
                editable: false,
                width: 400,
                filterPickList: true,
                tagItemCloseCls: null,
                itemTpl: '{name}',
                listeners: {
                    beforedeselect: function (tagfield, record, index, eOpts) {
                        return false;
                    }
                }
            }]
        });
    }
});