How to add Filter picker in column header of Ext JS Grid 3.2

Question

I want to add filter picker (that has options for filter data of column) in the column header of a grid. I'm using Ext JS 3.2.2

I am getting this:

I want my header like this:

How to add filter plugin in my grid?

Also I am trying this in code but not getting filter in drop down.

this.filters = new Ext.ux.grid.filter.StringFilter({
            filters:this.filter
        }) ; 
        grid.plugins = [this.filters],
        grid.features = [{
                ftype : this.filters
            }
        ];

Thanks for your help

Answer 1

To use filder in header of grid you need to write by following manner. diclear array of filter and then give scope to grid. Then write

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

Write Plugin

grid.plugins = [this.filters];

Where you adding column write

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

Data will come from the store. You cam modify as per you requirement. This is just basic what I will suggest you to achieve.