ExtJS 4 add custom filter to GridPanel that uses reconfigure method

Question

I am trying to solve a problem with a functionality I need to implement for a grid. This grid should use a custom "filter" which extends from "Ext.ux.grid.FiltersFeature", this component works fine since it works for other grids I implemented. the problem is that the grid I want to implement now, does not load it columns at the first moment like the previous I implemented; this grid has a controller which uses a "reconfigure" method to create the columns based on a "store".

For instance:

grid.reconfigure(store, cols);

I've seen many examples on how to add individual filters and so on, but they use the "ftype: "filters", I do need to use my "ftype: mycustomfilter" specifically. Any idea on how can I do this? I tried everything, but nothing seems to be working and I am stucked with this.

Here's some of my code:

Portion of code in the Controller:

 if (refreshGrid) {
        var cols = this.createGridColumns();
        //This is the method that loads my column based on the store 
        //(which I retrieve from Ajax request)
        grid.reconfigure(store, cols);
        oldStore.destroyStore();
    } else {
        this.mergeFn.call(this, values, store);
        grid.view.refresh();
    }

What I tried to do is to add a feature after reconfiguring the grid:

grid.reconfigure(store, cols);
//Then I add this portion of code:
grid.features = [{
  ftype: 'customfilterfeature',
  autoReload: false,
  local: true,
  filters: [{type: 'list', dataIndex: 'activity'},
            {type: 'list', dataIndex: 'datetime'}]  
  }]

Does anybody have an idea on how can I achieve this? Because this is not working at all, the filter is not being displayed. Any help will be really appreciated. Thanks in advance.

Pierre Pierre · Accepted Answer · 2014-04-10T09:42:37

We had to do this on several grids.

We extended from Ext.ux.grid.filter.Filter and then used these filters on the column basis, not the grid itself. This way, each column could specify the filter they want, which would be changed everytime you reconfigure your grid.

Just require your filter class extension in your controller, and you can use it this way:

var columnsDef: [
    { text: 'Column Name', dataIndex:'foo', filter: { type: 'yourCustomFilterAlias'}},
    ...
];

grid.reconfigure(store, columnsDef);

After that it is just a matter of overriding the right methods in your custom Filter class.

Hope this helps.

ExtJS 4 add custom filter to GridPanel that uses reconfigure method

1 Answers