如何过滤 EXTJS 网格列表过滤器？答案

【问题标题】：How do I filter EXTJS Grid list filters?如何过滤 EXTJS 网格列表过滤器？
【发布时间】：2020-06-12 20:31:19
【问题描述】：

我有一个带有列表过滤器的网格。当我过滤一列时，其他列表过滤器没有过滤结果。

我做了一个test fiddle 来举例说明：

当我过滤到项目负责人角色时，我只有一个活动状态的结果（戴安娜）。但是当我查看状态过滤器时 我同时看到了（活动和暂停）：

有什么办法只显示与结果关联的过滤器？

注意：我使用的是 ExtJS 6.5.2。

【问题讨论】：

标签： javascript list extjs filter grid

【解决方案1】：

这可以通过覆盖没有具体（从网格存储自动生成）存储的列表过滤器的方法getOptionsFromStore 来完成。或者你可以基于它创建新的组件

fiddle

Ext.define('Ext.grid.filters.filter.DynamicList', {
    extend: 'Ext.grid.filters.filter.List',
    alias: 'grid.filter.d-list',
    type: 'd-list',
    getOptionsFromStore: function (store) {

        var me = this,
            data = store.getData(),
            map = {},
            ret = [],
            dataIndex = me.dataIndex,
            labelIndex = me.labelIndex,
            recData, idValue, labelValue;

        if (store.isFiltered() && !store.remoteFilter ) {
            data = data.getSource();
        }

        //each filtered records, not all
        Ext.Array.each(store.getRange(),function (record) {
            recData = record.data;

            idValue = recData[dataIndex];
            labelValue = recData[labelIndex];

            if (labelValue === undefined) {
                labelValue = idValue;
            }

            if (!map[idValue]) {
                map[idValue] = 1;
                ret.push([idValue, labelValue]);
            }
        }, null, {
            filtered: true,
            collapsed: true
        });

        return ret;
    }
});

【讨论】：