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'
    ]