How to add filters in grid column headers in extjs?

Question

I have a grid with lots of records in it. so I want to add filters in each column header to filter the required data easily. I have seen the example given in the sencha docs. But How to implement it in the Extjs 4.2 version. How to use UX classes in it? Is there any plugin available?

I am greatly thankful to you.

Please help me.

Anand

Answer 1

This is an example:

Ext.define('Webdesktop.view.admin.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.admin_casoslist',
initComponent: function() {
    var me = this,
    filters = {
        ftype: 'filters',
        encode: false,
        local: true
    };

    Ext.apply(me, {
        title: 'gridTitle',
        store: List_CasSos_Store,

        filterable: true,
        features: [filters],
        closable: true, // fixme: need to set here, because has no effect in tabpanel defaults configuration
        autoScroll: true,
        columns: {
            items:[
            {
                text: 'header1',
                filter: {
                    type: 'string'
                },
                flex: 1,
                dataIndex: 'relation_patron_paraine'
            },{
                text:'header2',
                filter: {
                    type: 'list',
                    options: ['case4', 'case3', 'case2', 'case1']
                },
                hidden:true,
                flex: 1,
                dataIndex: 'etatsante'
            },{
                text:'header3',
                filter: {
                    type: 'numeric'
                },
                hidden:true,
                flex: 1,
                dataIndex: 'revenumnsuel'
            }
            ],
            defaults : {
                align: 'center'
            }
        }
    });
    me.callParent();
}

In the controller:

uses: [
   'Webdesktop.view.admin.List',
    ...
   'Ext.ux.grid.FiltersFeature'
    ]

Answer 2

You need to add this to your grid configuration:

plugins: [{
  ptype: 'gridfilters'
}],

And then in each column:

filter: {type: 'string', dataIndex: 'passengerFullName'},

Note that the filter is depended on store whether it will be a remote filter or a local filter.

See here for more info: http://docs.sencha.com/extjs/6.0.2-classic/Ext.grid.filters.Filters.html

Answer 3

To use filter in header of grid you need to declare array of filter and then give scope to grid. Then write

this.filters = new Ext.ux.grid.GridFilters({
            filters:this.filter
        }) ;

Give a plugin for that

this.plugins = [this.filters];

Where you adding column write

gridEl.filter{
        type: 'list',
        dataIndex: "DATAINDEX",
        local : local,
        dataForFilter : data
    };

Answer 4

One solution it's to capture the "column click" column, get the param that you want to filter and in the function put this filter on the Grid Store.

Column Example

{
    header      : "email",
    dataIndex   : 'email',
    listeners : {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ 
                storeGrid.filter("email", /\.com$/); // email
                            storeGrid.sort('myField', 'ASC');
            }
        }
    }
},

Sencha Filter: filter store

Sencha Sort: sort store data