Javascript ExtJS：同步组合框和标记字段

客户请求申请人能够从选项列表中进行主要选择，但也可以从相同选项中进行多项选择。主值和次值不能重叠

例如，两个颜色选择问题：

Favorite Color: SELECT  Other Colors: SELECT

用户选择最喜欢的红色：

Favorite Color: RED     Other Colors: SELECT
                ORANGE
                YELLOW
                GREEN
                BLUE
                PURPLE

红色现在已从其他颜色消失：

Favorite Color: RED     Other Colors: ORANGE
                                      YELLOW
                                      GREEN
                                      BLUE
                                      PURPLE

用户选择其他颜色绿色和蓝色：

Favorite Color: RED     Other Colors: GREEN BLUE

绿色和蓝色不再是最喜欢的颜色：

Favorite Color: RED     Other Colors: GREEN BLUE
                ORANGE
                YELLOW
                PURPLE

用户选择不同的喜爱颜色紫色：

Favorite Color: PURPLE  Other Colors: GREEN BLUE

其他颜色现在为红色，但没有紫色：

Favorite Color: PURPLE  Other Colors: GREEN BLUE
                                      RED
                                      ORANGE
                                      YELLOW

我曾考虑将组合框与标记字段配对，但正如您所看到的那样，试图使商店双方保持一致是一件麻烦事。我尝试使用过滤器，但它们似乎无法动态工作

---

在ExtJS中有更简单的方法吗？就像一个标记字段有一个存储区但有两个输入框，一个限制一个选择，另一个允许多个？

您可以使用过滤器动态过滤存储区

对于第一个组合框，您需要创建一个只过滤单个选择的过滤器

select: function(comb, record) {
    const value = record.get('abbr');
    const otherColors = Ext.getCmp('OtherColors');
    const otherColorsStore = otherColors.getStore();
    otherColorsStore.setFilters([{
        property: 'abbr',
        operator: '!=',
        value   : value
    }]);
},

对于配置了多选的secound组合框，您需要创建一个值数组，该数组应为第一个组合框过滤掉，然后使用

---

谢谢。重要的技巧是复制存储，以便应用独立的过滤器。我在使用同一家商店时遇到了各种问题。

select: function(me,records) {
    const favouriteColor = Ext.getCmp('FavouriteColor');
    const favouriteColorStore = favouriteColor.getStore();
    const values = records.map(r => r.get('abbr'));  // creates an array of all colors to filter out
    favouriteColorStore.setFilters([{
        property: 'abbr',
        operator: 'notin',
        value   : values
    }]);
 }