How do I filter EXTJS Grid list filters?

0
votes

I have a grid with list filters. When I filter one column, the other list filters are not filtered with the results.

I did a test fiddle to exemplify this:


When I filter to project leader role, I only have one result with active status (Diana). But when I look at the status filters I see both (active and suspended):
enter image description here

Is there any way that only the filters associated with the results are displayed?

Note: I'm using ExtJS 6.5.2.

1
javascriptlistextjsfiltergrid

1 Answers

3
votes

This can be done by overriding the method getOptionsFromStore for list filter without concrete (with autogenerated from grid store) store. Or you can create new component based on it

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