Adding a filter header row to ExtJS GridPanel

I know that it's possible to add a filter row UNDER the column title because I've seen it done with Coolite. But since I'm a tota开发者_如何转开发l newbie with Sencha (ExtJS), I have trouble finding how to do it with the ExtJS.grid.GridPanel directly in the script. Would you point me in the right direction with some samples please ?

If possible, I would like to do so without plugins, but if there's one out there doing great and easy to use, I could change my mind.

Thanks !

Here you have a link to the GridHeaderFilters Plugin. There you have an easy example of how to use it.

And regarding your comment about trying to do this without a plugin I recommend you not to do it. Because this might seem like a easy code to write but I believe it is not. And that is why this plugin has hundreds of lines. I think this is not a plugin full of features that you won't use, this plugin just does the filtering the way you need it.

And as a final note, if you are expecting the exact same behavior as in this coolite example I think you are out of luck. Because if you get the javascript source code of that example and run it through jsbeautifier you will see that this example is not using any ExtJS plugin and is not a easy code as is using a really complex template for the headers.