EXTJS 4 - Grid Filter or store filter clearing existing filter on store

Question

I have come across an issue where the grid filter is clearing the existing filter that is on the store.

Basically, I have two grids on top of each other, when a user clicks on the top grid, data is filtered into the second grid, it is the second grid where the issue is occurring.

I have created a simplified example of the issue via fiddle

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

Notes

The caveat is that I am "flattening" nested JSON custom fields via the record.beginEdit() command so that this data can be shown in the grid. I am using remoteFilter: false, if this is set to remoteFilter: true then the filter part works but remoteFilter: true destroys the nested data set via the record.beginEdit();

How to reproduce

1) If you apply the grid filter above in column Name and select Homer then the Grid filter is clearing down the filter applied on the store in line 113 and now showing the two Homer records. There are two Homer records but each has a different summaryId value.

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

2) If you deselect the filter, then the filter applied to the store in line 113 is not maintained and all records are now shown.

Answer 1

Change your store like this below :

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

Check this demo from your previous demo...

EDIT : Try this code to your fiddle, this is a freaky complicated way to get this. so, you need a trigger to filter like a button, may be this will get you a little help. I've edited my Demo Too, check it out.

/*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": "[email protected]",
            "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": "[email protected]",
            "phone": "555-222-1244",
            "customFields": []
        }, {
            'id': 3,
            'summaryId': 1,
            'name': 'Homer',
            "email": "[email protected]",
            "phone": "555-222-1244",
            "customFields": []
        }, {
            'id': 4,
            'summaryId': 2,
            'name': 'Fred',
            "email": "[email protected]",
            "phone": "555-222-1264",
            "customFields": []
        }, {
            'id': 5,
            'summaryId': 2,
            'name': 'Homer',
            "email": "[email protected]",
            "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()
    });
});