How do I set a Ext Grid Filter Default?

问题:

I have a working sort-able grid using the ext 3.4 grid filter plugin. I would like to default the active column to filter true values. User who needs the inactive records could remove the filter. How do I specify a 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'
    }]

回答1:

I realise this is an old question but it took me a while to find a solution, therefore I thought I would share.

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

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

2) In order to initially filter the data use the filterBy() method in the store. This could 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 ';
        });
    }
});

回答2:

The answer was in the Filter.js source code. The filter object within the column definition can be used to configure 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
        }
}

回答3:

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

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 original code store.load(), and wipe off the store.load(). Then it will only show the record with size equals 'small' at the first load of the web page. Cheers!

回答4:

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

This should work with both remote and static stores. Note that this also works with filterbar plugin.

So your column item is something like:

{
    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 just 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);
},