How do I use the gridfilters Plugin AND programmatically clear / set filters?
In my application (ExtJS 5.0.1) I am trying to use a grid with plugin buttons and gridfilters (and also from tree) with custom / hardcoded fits.
I was able to partially simulate the set and clear the filters, but I am having the following problems:
1- When I set the filter with grid.filters.store.addFilter(..)
, the column header style does not change to bold and the grid filter checkbox remains unchecked.
2- Same as 1, but vice versa ... first I set the filter in the column, when I clear the filter, the column remains bold, but in this case the checkbox is cleared (as it should be).
3- When I use the "sometimes" pivot function, the total is not updated
So my question is: Is there a suitable way to programmatically set / clear filters that mimic the gridfilter plugin?
I've put in a minimal script to simulate this.
https://fiddle.sencha.com/#fiddle/akh
Best wishes, Ricardo Seixas
source to share
Just use a filter instance on a column:
var column = grid.columnManager.getColumns()[0];
column.filter.setValue('J');
column.filter.enable();
Working example: http://jsfiddle.net/3be0s3d8/7/
source to share
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);
}
}
});
source to share
You can directly modify 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 it helps.
source to share