Question

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

E.g。两个颜色选择问题：

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

对于配置了多选的secound组合框，您需要创建一个值的数组，这些值应该被筛选出来用于第一个组合框，然后使用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.

ExtJS：同步ComboBox和TagField

1 个答案: