How to add search filter in EXTJS

Question

I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars. What change i need to do for the below code The expected output is i need to get search filter option under each columns.

 Ext.define('ViewerModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.viewermodel',

    stores: {

        mystore: {

            fields: ['name', 'email', 'cars'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "[email protected]"
                }, {
                    'name': 'Bart',
                    "email": "[email protected]"
                }, {
                    'name': 'Homer',
                    "email": "[email protected]"
                }, {
                    'name': 'Marge',
                    "email": "[email protected]"
                }]
            },

            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        }

    }
});

Ext.define('APP.HorizontalBox', {
    extend: 'Ext.container.Container',
    requires: ['Ext.layout.container.HBox'],
    xtype: 'layout-horizontal-box',
    width: 750,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    bodyPadding: 10,

    defaults: {
        frame: true,
        bodyPadding: 10
    },
    viewModel: {
        type: 'viewermodel'
    },

    items: [{
        xtype: 'grid',
        title: 'Grid: click on the grid rows',
        itemId: 'myGridItemId',
        flex: 1.2,
        margin: '0 10 0 0',
        bind: {
            store: '{mystore}',
            selection: '{users}'
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 0.5
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Cars',
            dataIndex: 'cars',
            flex: 1
        }],

        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                padding: '2 5 2 5',
                text: 'Edit item',
                handler: function (btn) {
                    var grid = btn.up('grid');
                    var selectedRow = grid.getSelectionModel().getSelection()[0];
                    var janela = Ext.create('APP.MyWindow', {
                        animateTarget: btn.getEl(),
                        //EDITED
                        viewModel: {
                            data: {
                                users: selectedRow
                            }
                        }
                    }).show();
                }
            }]
        }],
    }, {
        xtype: 'form',
        title: 'View',
        itemId: 'panelbindItemId',
        flex: 1,
        margin: '0 10 0 0',
        defaults: {
            labelWidth: 50
        },
        items: [{
            xtype: 'displayfield',
            margin: '20 0 0 0',
            fieldLabel: 'Name',
            bind: '{users.name}'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Email',
            bind: '{users.email}'
        }]
    }]
});

Ext.define('APP.MyWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    reference: 'windowreference',

    title: 'MyWindow | Edit record',
    closable: true,
    modal: true,
    padding: '10px',
    height: 150,
    layout: 'fit',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {

            items: [{
                xtype: 'form',
                layout: 'anchor',
                defaults: {
                    padding: '5 0 5 0'
                },
                items: [{
                    xtype: 'textfield',
                    margin: '10 0 0 0',
                    fieldLabel: 'Name',
                    bind: '{users.name}'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    bind: '{users.email}'
                }]
            }]
        });

        me.callParent(arguments);

    }
});

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('APP.HorizontalBox', {
            renderTo: document.body,
            width: 750,
            height: 400,
            title: 'Title'
        });

    }
});

Answer 1

You can also use this code where it will search the data using the date.

listeners: {
                afterrender: function () {
                    var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                    menu.add([{
            xtype:'datefield',
            name:'date1',
            fieldLabel:'Filter By',
            format: 'y-m-d',
            listeners:{
                 renderer: Ext.util.Format.dateRenderer('y-m-d'),
                        field:{ xtype:'datefield',
                                autoSync:true,
                                allowBlank:false,
                                editor: new Ext.form.DateField(
                                        {format: 'y-m-d'})  }
            }
        }