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

Question

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

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

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

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

任何帮助表示赞赏。
问候
阿曼多

Answer 1

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

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