Ext4.2 Changing grid list filter options

by rixo

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all-neptune.css">

JavaScript

Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux');
Ext.require('Ext.ux.grid.FiltersFeature');
Ext.onReady(function() {

Ext.widget('grid', {
    renderTo: Ext.getBody()
    
    ,height: 400
    
    ,features: [{
        ftype: 'filters'
        ,local: true
    }]
    
    ,columns: [{
        dataIndex: 'a'
        ,text: 'Column A'
        ,filter: {
            type: 'list'
            ,options: ['Foo', 'Bar']
        }
    },{
        dataIndex: 'b'
        ,text: 'Column B'
    },{
        dataIndex: 'c'
        ,text: 'Column C'
    }]
    
    ,store: {
        fields: ['a', 'b', 'c']
        ,autoLoad: true
        ,proxy: {
            type: 'memory'
            ,reader: 'array'
            ,data: [
                ['Foo', 1, 'Bar']
                ,['Bar', 2, 'Baz']
                ,['Baz', 1, 'Bar']
                ,['Bat', 2, 'Baz']
            ]
        }
    }
    
    ,tbar: [{
        text: 'Change list options'
        ,handler: function() {
            var grid = this.up('grid'),
                // forget about getFeature, I read the doc and found something!
                filterFeature = grid.filters,
                colAFilter = filterFeature.getFilter('a');

            // if the columns menu has never been used, filters won't have been created
            if (!colAFilter) {
                // someone commented that this is the way to initialize filter
                filterFeature.view.headerCt.getMenu();
                colAFilter = filterFeature.getFilter('a');
            }
            
            // ok, we've got the ref, now let's try to recreate the menu
            colAFilter.menu = colAFilter.createMenu({
                options: ['Baz', 'Bat']
            });
        }
    }]
});
    
}); // onReady