EXTJS 6.7：标签字段 - 如何禁用相同值的多选？

问题描述

使用 ExtJs 6.7，我遇到了标签字段的问题，它允许从列表中选择相同的标签两次。 用例： 我在远程存储中使用标签字段。标签字段被创建并填充标签（使用 setValue(counties)）。就案例而言，这些标签是：美国、英国、杰姆拉尼、奥地利、澳大利亚。 然后用户开始在标签字段中搜索并搜索以“Unit”开头的状态，这会将远程国家/地区提供商的 2 个国家/地区加载到商店中。在我们的例子中美国和英国。这里有两个问题。

1. 这两个加载的国家/地区未在标签字段选择器中标记为已选择（就像它们是第一次加载字段存储）
2. 用户可以选择一个或两个国家/地区，然后他们实际上会被添加到该字段中（这是错误的。想不出任何需要在该字段中两次使用相同记录的用例）

因此，我试图找出在何处正确覆盖（破解）组合/标记字段方法以检查选择器中的选定记录，或者仅过滤掉已存在于 valueStore 中的选定值。或者，如果它实际上需要这种默认行为，任何人都可以向我解释 如何在我需要时限制它。

这是小提琴。即使存储在更改搜索字符串时加载相同的结果，结果也应在选择器中标记为已选择。
https://fiddle.sencha.com/#view/editor&fiddle/3bf8

感谢任何帮助。
问候
阿曼多

解决方法

如果你有一个静态存储，你可以使用：

filterPickList: true,

从组合中删除已经选择的条目，但是对于动态数据，您必须检查是否已经选择了值：

listeners:{
    beforeselect:function  ( combo,record,index,eOpts ) {
                    
        if (combo.getValue().indexOf(record.data['ID'])!=-1) return false;
                    
     }
}

编辑：

试试这个带有模板的解决方案，以在组合重新加载时将列表标记为选中：

listConfig: {
             itemTpl: new Ext.XTemplate(
                '<tpl for=".">','  <div  ','  <tpl if="this.isSelected(ID)"> ','     class="x-boundlist-selected" ','  </tpl>','  ><span>{NAME}</span></div>','</tpl>',{
                isSelected: function(id){
                    return (this.owner.up("tagfield").getValue().indexOf(id)!=-1);
                },})
       },

记得去掉“filterPickList”

这是一个工作示例 FIDDLE