Dinamic Filters

I have an application that is a simple reports page. I'm using a Store with JsonP to fill my grid panel and for sending to the customized filters (since i don't want the ones which come with sencha gridpanel, not because they are useless but because i want my own filters) The thing is i want to build filters on a panel next to my gridpanel according to the data received via JsonP.

For example, the report is a bunch of employees' records with columns [code,name,nationality,age,genre]
but in my jsonP I received only nationality and genre. So my target is to create dinamically those filters by adding controls to my filters panel (empty at the begining) with button controls representing for each filter.

I think you could probably listen for the result from the store load. In that listener, prepare a list of columns from the data received (you could even add a property in your result that is just a list of columns to make it easier...).

Once you have the list of columns for which you want filters, simply loop over them and create new filter controls and add them to the panel.

Here's a quick example I threw together with shows, theoretically, how you could fit the pieces together. Note: this is not a 100% fit for your needs, since I'm faking the load event...but maybe the concept will work for your needs.

http://jsfiddle.net/existdissolve/XKvc4/