EXTJS 6.2如何禁用标签字段已选中标签或防止其被移除

要实现允许添加新标签但禁止移除初始已选标签的需求，可以通过事件拦截+样式优化的方式配合实现：

1. 拦截初始标签的取消选中操作 #

当用户点击标签的删除按钮时，Tag Field会触发beforedeselect事件，我们可以在这里拦截初始标签的取消行为：

• 组件初始化时保存初始选中的标签列表
• 在事件回调中判断当前要取消的标签是否属于初始列表，是则返回false阻止取消

2. 隐藏初始标签的删除按钮（优化体验） #

仅阻止事件还不够，需要让用户直观感知哪些标签不能删除，因此要隐藏初始标签的关闭按钮，并添加样式标识。

完整代码示例 #

Ext.create('Ext.form.field.Tag', {
    renderTo: Ext.getBody(),
    fieldLabel: '业务标签',
    store: ['客户管理', '订单处理', '数据统计', '系统设置', '权限管理'],
    value: ['客户管理', '订单处理'], // 初始锁定的标签
    initComponent: function() {
        // 深拷贝初始标签列表，避免后续修改影响判断
        this.lockedTags = Ext.Array.clone(this.value);
        this.callParent(arguments);
    },
    listeners: {
        // 拦截初始标签的取消选中操作
        beforedeselect: function(field, record) {
            const tagValue = record.get(field.valueField || 'text');
            return !this.lockedTags.includes(tagValue);
        },
        // 渲染完成后处理初始标签的样式和按钮
        afterrender: function(field) {
            const tagManager = field.tagManager;
            this.lockedTags.forEach(tagText => {
                const record = field.store.findRecord(field.valueField || 'text', tagText);
                if (record) {
                    const tagEl = tagManager.getTagEl(record);
                    if (tagEl) {
                        // 隐藏删除按钮
                        tagEl.down('.x-tagfield-item-close').hide();
                        // 添加锁定样式
                        tagEl.addCls('locked-tag');
                    }
                }
            });
        },
        // 新选中标签时确保显示删除按钮
        select: function(field, records) {
            records.forEach(record => {
                const tagValue = record.get(field.valueField || 'text');
                if (!this.lockedTags.includes(tagValue)) {
                    const tagEl = field.tagManager.getTagEl(record);
                    if (tagEl) {
                        tagEl.down('.x-tagfield-item-close').show();
                    }
                }
            });
        }
    }
});

自定义CSS样式（可选） #

给锁定标签添加视觉区分：

.locked-tag {
    background-color: #f0f0f0;
    border-color: #d0d0d0;
    cursor: default;
}

注意事项 #

• 如果初始标签是动态加载的（比如从后台获取），需要在store加载完成后再初始化lockedTags，可以在store的load事件中处理
• 若使用自定义的valueField（而非默认的text），需要修改代码中获取标签值的逻辑，对应换成你的字段名

内容的提问来源于stack exchange，提问作者CycleGeek