Add filter to a Extjs grid

Question

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.

Answer 1

Thanks for answering my question. It works for me. I've added the follow OnClick handler in the controller.

 onFilterClick: function(button) {

    var form = button.up('form').getForm();

    if (form.isValid()) {

        var fieldOne = Ext.getCmp("fieldOne").getValue();
        var fieldTwo = Ext.getCmp("fieldTwo").getValue();

        // check if there is some input
        if (!!fieldOne || !!fieldTwo) {

            // get store
            var store = Ext.data.StoreManager.lookup('store');

            // check if store not empty
            if(!Ext.isEmpty(store)){
                // clear filters and add a few new filters if params not empty
                store.clearFilter(true);

                if (!Ext.isEmpty(fieldOne)) {
                    store.filter("fieldOne",  fieldOne)
                }

                if (!Ext.isEmpty(fieldTwo)) {
                    store.filter("fieldTwo",  fieldTwo)
                }

                // count the filtered rows
               var count = store.snapshot ? store.snapshot.length : store.getCount();

                if (count == 0) {
                    alert("No data found!");
                    store.clearFilter();    
                }
            } else{
                //Store empty
                console.warn("Store's empty");
            }
        } else {
            // no values 
            alert("No entered data!");
        }
    } else {
        // form not valid
        alert("Form not valid!");
    }
}

Answer 2

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