使用 ExtJS 过滤具有来自一个属性的值数组的存储

Posted 2023-02-26

【中文标题】使用 ExtJS 过滤具有来自一个属性的值数组的存储

【英文标题】：Filter a store with array of values from one property with ExtJS

【发布时间】：2014-03-03 10:18:05

【问题描述】：

我正在尝试对组合框应用约束。目前它正在工作一半。 在组合框上，我有这个监听器：

[...]
        listeners: 
            'focus': function (combo, value) 
                var orgComboVal = Ext.getCmp('Org1')
                var getOrgValue = orgComboVal.getValue();
                if (typeof getOrgValue !== undefined) 
                    reseaulist.clearFilter(true);
                    for (var q = 0, l = getOrgValue.length; q < l; q++) 
                        reseaulist.filter([
                            property:'code_organisme', value: getOrgValue[q]
                        ]);
                    
                
            
        

Ext.getCmp('Org1') 定义了另一个组合框。 当 orgComboVal.getValue() 是单个值时，过滤器应用良好。 但是当它是一个值数组时，例如 ["5", "9"]，它不起作用并且应该被过滤的组合框没有显示任何值（所以我猜一个过滤器仍然应用但方式不正确）。

我猜这是因为 reseaulist.filter 被多次调用。 我怎样才能做到这一点？

我看到了 filterBy 方法，但我不知道如何使它起作用。

另外，这篇文章很有趣：How to filter a store with multiple values at once? 但同样，不能让它工作，因为

getOrgValue.split(',') 

显示错误

(Object Array has no method split)

任何提示？我正在使用 ExtJS 4.2。

编辑

感谢@rixo，我成功了。 另外，我不得不更改他提供给我的一些代码，因为 Org1 组合框的值始终是一个数组，即使是空的，所以存储过滤器永远不会被清除。

这里是：

            'focus': function (combo, value) 
                var orgComboVal = Ext.getCmp('Org1')
                var values = orgComboVal.getValue();
                console.log(values)
                if (values != null) 
                    reseaulist.clearFilter(false);
                    if (Ext.isArray(values)) 
                        if (0 < values.length) 
                            reseaulist.filterBy(function(record, id) 
                                return Ext.Array.contains(values, record.get('code_organisme'));
                            );
                         else 
                        reseaulist.clearFilter(true);
                       
                     
                 
            

【问题讨论】：

请注意标签不是关键字。在标签列表中塞满与您的问题中相同的单词将无助于对其进行分类。请务必阅读选择标签时出现的说明！

【参考方案1】：

每个过滤器一个接一个地应用于先前过滤的数据集，因此您的代码实现了逻辑与。这就是过滤掉所有值的原因...

这是一个使用filterBy 接受数组中任何值的示例：

function (combo, value) 
    var orgComboVal = Ext.getCmp('Org1')
    var values = orgComboVal.getValue();
    if (values != null) 
        store.clearFilter(false);
        if (Ext.isArray(values)) 
            store.filterBy(function(record, id) 
                return Ext.Array.contains(values, record.get('code_organisme'));
            );
         else 
            record.get('code_organisme') === values;
        
     else 
        store.clearFilter(true);
    

或者您也可以使用带有filter 方法的正则表达式：

function (combo, value) 
    var orgComboVal = Ext.getCmp('Org1')
    var values = orgComboVal.getValue();
    if (values != null) 
        var filterValue = Ext.isArray(values)
            ? new RegExp('^(?:' + Ext.Array.map(values, function(value)return Ext.escapeRe(value)).join('|') + ')$')
            : values;
        store.clearFilter(false);
        store.filter('code_organisme', filterValue);
     else 
        store.clearFilter(true);
    

关于您的错误，数组确实没有 split 方法。字符串可以拆分为数组。数组，就他们而言，可以加入成一个字符串...

【讨论】：

我尝试了你的第一个解决方案，它正在工作，很好:)！只是一点， else store.clearFilter(true); 永远不会触发 :(，因此，如果用户从 Org1 组合中删除值，其他组合仍会被过滤。我 console.log 记录 Org1 组合的值，当它为空时，它返回 [] 而不是 null。跨度>

Ext.isArray(values) 总是被触发，因为 Org1 值总是一个数组，即使它是空的：[]。所以它总是应用过滤器。

你也可以使用Ext.isEmpty，它会为空数组以及未定义或空值返回true。

【参考方案2】：

试试这个....

var getOrgValue = "5,9,4"; // 值数组

reseaulist.filterBy(function(rec, id) 
  return getOrgValue.indexOf(rec.get('code_organisme')) !== -1;
);