How to set the filter filter by default?

Question

I have a working grid sorting using the ext 3.4 grid filter plugin. I would like to activate a column by default to filter true values. A user who needs inactive records can delete the filter. How to specify default filter column and value?

Thanks in advance!

colModel: new Ext.grid.ColumnModel({ defaults: { sortable: true // How do I specify a default filter value // // Only show active records unless the user changes the filter... }, columns: [{ dataIndex:'f_uid', id:'f_uid', header:'ID', hidden:true }, { dataIndex:'f_name', id:'f_name', header:'Name', }, { xtype:'booleancolumn', dataIndex:'f_active', id:'f_active', header:'Active', filterable:true, trueText:'Active', falseText:'Inactive' }] 

Answer 1

I understand that this is an old question, but it took me a while to find a solution, so I thought I wanted to share.

1) The filter can be set using the value property in the filter.

 filter: { type: 'LIST', value: ['VALUE TO FILTER'] } 

2) For the initial data filtering, use the filterBy () method in the repository. This can be defined in the onRender event handler.

 this.getStore().load({ scope:this, callback: function() { // filter the store this.getStore().filterBy(function(record, id) { // true will display the record, false will not return record.data.DATA_TO_FILTER == 'VALUE TO FILTER '; }); } }); 

Answer 2

The answer was in the source code of Filter.js. The filter object in the column definition can be used to customize the default behavior.

 }, { xtype:'booleancolumn', dataIndex:'f_active', id:'f_active', header:'Active', trueText:'Active', falseText:'Inactive', filterable:true, filter: { value:1, // 0 is false, 1 is true active:true // turn on the filter } } 

Answer 3

I ran into the same problem and I found that @John's answer is right, I can get it to work with the sample http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid- filter-local.html , for grid-filter-local.js, just add the code:

 grid.getStore().load({ scope:this, callback: function() { // filter the store grid.getStore().filterBy(function(record, id) { // true will display the record, false will not return record.data.size === 'small'; }); } }); 

before the source code store.load () and wipe store.load (). Then it will only show a record with a size of "small" when you first load a web page. Hurrah!

Answer 4

I created a universal helper class that allows you to set default values ​​in a column definition. https://gist.github.com/Eccenux/ea7332159d5c54823ad7

This should work with both remote and static repositories. Please note that this also works with the filter plugin.

So your column element looks something like this:

 { header: 'Filename', dataIndex: 'fileName', filter: { type: 'string', // filename that starts with current year value: Ext.Date.format(new Date(), 'Y'), active:true } }, 

And then in your window component, you simply add something like:

 initComponent: function() { this.callParent(); // apply default filters from grid to store var grid = this.down('grid'); var defaultFilters = Ext.create('Ext.ux.grid.DefaultFilters'); defaultFilters.apply(grid); },