How to use gridfilters Plugin AND programmatically clear/set the filters?

3
votes

In my app (ExtJS 5.0.1) I'm trying to use a grid with the gridfilters Plugin AND shortcut buttons (and also from a tree) with custom/hardcoded fiters.

I was able to partially mimic the set and clear of the filters, but I'm having the following problems:

1- When I set a filter via grid.filters.store.addFilter(..) the style of the column title doesn't change to bold, and the grid filter checkbox stays unchecked.

2- Same as 1 but reversed... first I set the filter on the column, when I clear the filter the column stays bold, but in this case the checkbox is cleared (as it should).

3- When I'm using summary feature 'sometimes' the total is not updated

So, my question is: Is there a proper way to programmatically set/clear filters mimicking the gridfilter Plugin ?

I've put a minimal Fiddle to simulate this.

https://fiddle.sencha.com/#fiddle/akh

Best Regards, Ricardo Seixas

4
extjsextjs5

4 Answers

5
votes

Just use filter instance on column:

var column = grid.columnManager.getColumns()[0];
column.filter.setValue('J');
column.filter.enable();

Working sample: http://jsfiddle.net/3be0s3d8/7/

1
votes

For List Filters use the following override to enable the setValue method:

//Enable setting filter values in list filters
Ext.define('Ext.ux.fixed.ListFilter', {
    override: 'Ext.grid.filters.filter.List',
    setValue: function(values) {
        var me = this, len = values.length;
        if(!values) {
            me.callParent();
            return;
        }
        if(!me.menu){
            me.createMenu();
        }
        me.filter.setValue(values);

        if (len && me.active) {
            me.updateStoreFilter(me.filter);
        } else {
            me.setActive(!!len);
        }        
    }
});
0
votes

You can directly change the styles in the GridFilter.css file :

<link rel="stylesheet" type="text/css" href="js/lib/ext-4.2.1.883/ux/grid/css/GridFilters.css" />

By changing this element : 

.ux-filtered-column {
    font-style: italic;
    font-weight: bold;
    background: #56b8ff;
}

Hope this helps.

0
votes

In the latest release (5.1) Ext's ChainedStore worked well for me.