ExtJS：同步 ComboBox 和 TagField

Question

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

例如两道选色题：

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 中有更简单的方法吗？就像一个标签域有一个商店但有两个输入框，一个限制一个选择，另一个允许多个？

Answer 1

您可以使用过滤器动态过滤商店。

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

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
    }]);
},

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

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
    }]);
 }

See the working fiddle.