Show Grid filters in Column header versus hidden in column menu ?

Hi,

I have a requirement to allow filtering of my grid data by every column.

However, we need to have the filter visible in each column header versus having to access it from the column menu.

I can get an arbitrary component to render in the header, and (albeit hack-ishly) get it to hear and bubble a click, but would rather use the built in filter feature and extend Ext.ux.grid.filter.Filter as needed versus having to roll my own implementation.

Please help.

Thanks !

Code:

Ext.define('MyApp.filters.Name', {
    extend              : 'Ext.grid.column.Column',
    alias               : 'widget.MyNameFilter',
    menuDisabled: true,
    width: 90,
    minWidth: 90,
    headerName: null,




    listeners: {
        scope: this,
        afterrender: function(component, newValue, oldValue, opts) {
            var inner = component.getEl().down('.' + Ext.baseCSSPrefix + 'column-header-inner');
            inner.uppy = component;
            component.headerName = new Ext.form.field.Text({
                width: 90,
                emptyText: 'Filter By...'


            });


            component.headerName.render(inner);
            component.headerName.inputEl.on('click', function(event) {
                event.stopPropagation();
            })
        }
    },
    bubbleEvents: ['headerNameChange']
});