javascript - EXTJS 4 - 网格过滤器或商店过滤器清除商店中的现有过滤器

Question

我遇到了一个问题，即网格过滤器正在清除商店中的现有过滤器。

基本上，我有两个相互重叠的网格，当用户单击顶部网格时，数据会被过滤到第二个网格中，这是发生问题的第二个网格。

我通过 fiddle 创建了该问题的简化示例

https://fiddle.sencha.com/#fiddle/if0

注释

需要注意的是，我通过 record.beginEdit() 命令“展平”嵌套的 JSON 自定义字段，以便可以在网格中显示此数据。我正在使用 remoteFilter: false，如果将其设置为 remoteFilter: true 则过滤器部分可以工作，但 remoteFilter: true 会破坏嵌套数据集通过 record.beginEdit();

如何重现

1) 如果您在 Name 列中应用上方的网格过滤器并选择 Homer，则网格过滤器将清除第 113 行中应用于商店的过滤器，现在显示两个荷马记录。有两条 Homer 记录，但每条记录都有不同的summaryId 值。

store.filter([{id: 'summaryId', property: 'summaryId', value:1, exactMatch: true}]);

2) 如果取消选择过滤器，则不会维护第 113 行中应用于商店的过滤器，并且现在会显示所有记录。

Answer 1

像下面这样更改您的商店:

store = Ext.create('Filter.data.Store', {
    data: data,
    filters: [{
        property: 'summaryId',
        value: '1'
    }]
});

检查this来自您之前的演示的演示...

编辑: 在你的 fiddle 上尝试一下这段代码，这是一种非常复杂的方法。所以，你需要一个像按钮一样的触发器来过滤，也许这会给你带来一些帮助。我也编辑了我的演示，请查看。

/*global Ext:false */
Ext.Loader.setPath({

});

Ext.require(['*', 'Ext.ux.grid.FiltersFeature']);

Ext.define('Filter.data.Store', {
    extend: 'Ext.data.Store',
    id: 'simpsonsStore',
    autoLoad: true,
    remoteFilter: false,
    fields: [{
        name: 'name'
    }, {
        name: 'email'
    }, {
        name: 'phone'
    }, {
        name: 'summaryId'
    }, {
        name: 'customFields'
    }, {
        name: 'customFieldId129'
    }, {
        name: 'customFieldId130'
    }],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


Ext.onReady(function() {

    var filters = {
        ftype: 'filters',
        encode: false,
        local: true
    };

    data = {
        "total": 5,
        "items": [{
            'id': 1,
            'summaryId': 1,
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-222-1234",
            "customFields": [{
                "customFieldId": 129, // there can be multiple customfields
                "customFieldValue": "Bob"
            }, {
                "customFieldId": 130, // there can be multiple customfields
                "customFieldValue": "Smith"
            }, ]
        }, {
            'id': 2,
            'summaryId': 1,
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1244",
            "customFields": []
        }, {
            'id': 3,
            'summaryId': 1,
            'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244",
            "customFields": []
        }, {
            'id': 4,
            'summaryId': 2,
            'name': 'Fred',
            "email": "fred@simpsons.com",
            "phone": "555-222-1264",
            "customFields": []
        }, {
            'id': 5,
            'summaryId': 2,
            'name': 'Homer',
            "email": "HomerWork@simpsons.com",
            "phone": "555-222-1264",
            "customFields": []
        }]
    },

    store = Ext.create('Filter.data.Store', {
        data: data,
        //filters: [{
        //    property: 'summaryId',
        //    value: '1'
        //}]
    });

    store.load({
        callback: function() {
            for (var i = 0; i < store.data.length; i++) {
                var record = store.getAt(i);
                var customFieldsData = record.data.customFields;
                if (customFieldsData.length > 0) {
                    for (var j = 0; j < customFieldsData.length; j++) {
                        record.beginEdit();
                        store.filter([{property: 'summaryId',value: '1'}]);
                        record.set('customFieldId' + customFieldsData[j].customFieldId, customFieldsData[j].customFieldValue);
                        record.endEdit(true);
                    }
                }
                //store.sync();
            }
        }
    });

    // apply custom fields
    // the custom field code is an example, in short , nested data
    // and need to use the record function for each record so that the
    // grid can see the record


    //store.filter([{property: 'summaryId',value: '1'}]);
    var btn = Ext.create('Ext.Button', {
        text: 'Click me For filter summaryId',
        renderTo: Ext.getBody(),
        handler: function() {
            if(store.isFiltered()){
                //var data = Ext.encode(grid.filters.getFilterData());
                var data1 = grid.filters.getFilterData();
                store.filter([{property: 'summaryId',value: '1'}]);
                store.filter([{property: data1[0].field,value: data1[0].data.value}]);
                //Ext.Msg.alert('All Filter Data',data1[0].field + " " + data1[0].data.value);
                //Ext.Msg.alert('All Filter Data',data);
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        title: 'filter is on summaryId 1 - Selecting Homer returns two records instead of one',
        store: store,
        features: [filters],
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            filter: {
                type: 'list',
                options: ['Homer']
            }
        }, {
            header: 'summaryId',
            dataIndex: 'summaryId'
        }, {
            header: 'customField1',
            dataIndex: 'customFieldId129' //hardcoded for fiddler example
        }, {
            header: 'customField2',
            dataIndex: 'customFieldId130' //hardcoded for fiddler example
        }],
        width: 700,
        height: 500,
        renderTo: Ext.getBody()
    });
});