Add filter to a Extjs grid

I want to add some filters to my grid when I clicked on the filter button (see below). The filters must be aded to the grid with the given values from the filterpanel form.

On this page the textfield will be filled in and when I clicked on the filter button the onFilterClick handler will trigger the FilterController.

Ext.define('path.to.filterPanel', {
    extend: 'Ext.form.Panel',

    xtype: 'filter',
    controller: 'dashboard-filter',

    viewModel: { 
        type: 'dashboard-filter' 
    },

    frame: false,
    bodyPadding: 10,
    layout: 'form',

    // the fields 
    items: [{
        xtype: 'textfield',
        name: 'firstName',
        id: 'firstName',
        fieldLabel: 'Firstname'
    }, {
        xtype: 'textfield',
        name: 'lastName',
        id: 'lastName',
        fieldLabel: 'Lastname'
    }],

     buttons: [
        text   : 'Filter',
        handler: 'onFilterClick' // trigger to the controller
    }]
});

When clicked on the Filterbutton the values will be pust to this controller.

Ext.define('path.to.FilterController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.dashboard-filter',

    onFilterClick: function(button) {
   
        var form = button.up('form').getForm();
    
        if (form.isValid()) {
            // form valid 
        
            var firstName = Ext.getCmp("firstName").getValue();
            var lastName = Ext.getCmp("lastName").getValue();
        
            // check if there is some input
            if (!!employeeNumber || !!firstName || !!lastName) {
            

                // add filters but how??

            
            } 
        } else {
            // form not valid
            console.log("not valid");
        }
    }
});

Finally this is the grid file where the filters must be added.

Ext.define('path.to.gridPanel, {
    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.grid.column.Action',
        'App.store.Employees'
    ],

    controller: 'dashboard-gridVieuw',
    xtype: 'gridVieuw',
    store: 'Employees',
    
    stateful: true,
    collapsible: true,
    multiSelect: true,

    stateId: 'gridController',

    initComponent: function () {
        this.store = new App.store.Employees();
        var me = this;

        me.columns = [{
            header   : 'Firstname',
            flex     : 1,
            sortable : true,
            dataIndex: 'firstName'
        }, {
            header   : 'Lastname',
            flex     : 1,
            sortable : true,
            dataIndex: 'lastName'
        }]
    
    me.callParent();
    }
});

I use version 5 of extjs.

You can use filterBy method to filter the underlying store associated with the grid. Here is an example:

Ext.getStore('myStore').filterBy(function(record, id) {
            if (record.get('firstName') === firstName) {
                return true;
            } else {
                return false;
            }
        });

Here is a fiddle demonstrating a working example of a filter