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": "lisa@simpsons.com"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com"
                }]
            },

            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'
        });

    }
});

Does [this example](http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html) do what you need? — chrisuae, Oct 03 '17 at 18:11
@chrisuae exactly....but how to change my code. The example you shared is littel confusing. — Jerold Joel, Oct 04 '17 at 05:07

score 2 · Answer 1 · answered Oct 04 '17 at 10:41

2

You can do it in the afterrender event of grid (Refer this post.) For example:

listeners: {
                afterrender: function () {
                    var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                    menu.add([{
                        text: 'Search',
                        iconCls: 'x-fa fa-home',
                        handler: function () {
                            console.log("Search Item");
                        }
                    }]);
                }
            }

Check this Fiddle.

answered Oct 04 '17 at 10:41

Amita Suri

309
1
7

Thank you very much for spending your valuable time to answer my question – Jerold Joel Oct 04 '17 at 10:55
Your code is correct but i want to search using that button..it should work – Jerold Joel Oct 04 '17 at 10:56
Thanks for an upvote. Actually, I interpreted from your question that a Search Item was required in the Column Menu. – Amita Suri Oct 04 '17 at 11:02
Which button is "that button". The only thing resembling a button is the Edit item button which has a handler method. You can add (console.log("search Item")) to the handler function of editButton – Akin Okegbile Oct 04 '17 at 16:08

score 2 · Answer 2 · answered Oct 04 '17 at 10:53

What you are searching for is the FiltersFeature, and the usage is as follows:

xtype:'grid',
...
features:[{
    ftype: 'filters',
    local: true,
    filters: [{
        type: 'string',
        dataIndex: 'name'
    }, {
       ... (one definition for every column you want to allow filtering one)
    }]
}]

Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment. Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.

score 0 · Accepted Answer · answered Oct 05 '17 at 12:19

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'})  }
            }
        }

How to add search filter in EXTJS

3 Answers3