View Full Version : Excel-like column filters using list type filter?

15 Aug 2012, 2:39 PM
All -

I'm trying to set up a few columns in a grid of mine where there is a list filter, and the values in the list filter are gleaned from the values in that column.

I can statically do this:

dataIndex: "supplyType", filter: { type: 'list', options: ["PO", "Transfer", "WorkOrder"]}

but is there a good way that I can have the list filter pull its option values instead from the store of the grid, something like:

var store = grid.getStore();
dataIndex: "supplyType", filter: { type: 'list', store: store, dataIndex: 'supplyType'}

So far my attempts give me errors, as not specifying the options: array seems to cause a failure.

perhaps do I need to try and do something when the filter is created when the menu is actually clicked or something?



16 Aug 2012, 11:32 AM
You may want to have a look at this plugin:

It will load unique items into a combo


16 Aug 2012, 11:41 AM
Hi Scott -

Thanks for the answer. I think I may have been a bit unclear. I don't need a separate row or header for displaying the filters, I just would like a way for the built-in "list" type filter to take its options: [] values from the store of the grid. At this point, I'm trying to stay pretty close to the built-in functionality in the framework.



16 Aug 2012, 11:52 AM
You can create a unique filter on your store like this:

handler: function() {
var uniqueValue = '';
store.filter( // filter unique names
filterFn: function(item) {
var name = item.get('name');
if (uniqueValue !== name) {
uniqueValue = name;
return true;
} return false;


16 Aug 2012, 1:18 PM
Hi Scott -

Thanks for sticking with me. The problem I'm having is not figuring out how to get unique values, but rather, how to get those values into the grid's filter menu after the store is populated.

So I define a grid:

this.table= Ext.create("RS.common.grid.List",
store: Ext.create("RS.common.store.MemoryStore", { model: 'RS.common.popups.model.BKInfo' }),
{ dataIndex: 'seriesType', text: this.localizable.seriesType},
{ dataIndex: 'seriesName', text: this.localizable.series, width: '125px', filter: { type: 'list', options:['Cust Orders', 'Sales Orders-1']
//more columns

//later, the grid store gets populated and the grid shows values...

And I get something like the attached screenshot:

So the question is, is there a way that I can things up so that I don't have to specify the

filter: { type: 'list', options:['Cust Orders', 'Sales Orders-1']}

as in the column definition above?

I was hoping to just able to do something like:

{ dataIndex: 'seriesName', text: this.localizable.series, width: '125px', filter: { type: 'list', store: store, dataIndex: 'seriesName'}

so do I need to perhaps add a listener on the column (or filter?) to the store changing data, and cause that to update the options array, or...?

Thanks for any additional pointers...


16 Aug 2012, 1:31 PM
Have a look at:

onMenuBeforeShow: function(menu) {
// update code to add menu items


16 Aug 2012, 1:42 PM
Scott -

Thank you!

I think that gave me what I needed. When I've got something working I'll post it here for the archives.

Appreciate the replies.