Ext Js 4: Grid List Filter Is Not Updated

I am running a weird problem when I try to set Grid Filter list dynamically. Let me explain by my code snippets I have a column with filter list is defined as {

Solution 1:

Just changing the value of a property does not affect the component rendered or computed state. The menu is created when the list is first initialized. The first time you do that, it works because that's before the initialization, but the second time, that's too late.

If you can grab a reference to the instantiated ListFilter, I think you could force the recreation of the menu this way:

listFilter.menu = listFilter.createMenu({
    options: [ ... ] // new options// rest of the filter config
});

So, supposing you have a reference to your target grid, you could change the options for the column with dataIndex of "topAccount" by a call similar to this:

var listFilter = grid
    .findFeature('filters') // access filters feature of the grid
    .get('topAccount'); // access the filter for column
listFilter.menu = listFilter.createMenu({
    options: [ ... ] // new options// rest of the filter config
});

--- Edit ---

OK, complete example. Tested, working.

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 filter has never been used, it won't be available            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']
            });
        }
    }]
});

Solution 2:

I was solving similar problem and answers to this question helped me a lot. Local List filter menu is in fact lazy loaded (only created when clicked) and I needed to set filter menu to be reloaded if the grid store has been reloaded with different data. Solved it by destroying of menu after each reload, so on next click menu is recreated:

var on_load = function() {
  var grid_header = me.gridPanel.filters.view.headerCtif (grid_header.menu) {
    grid_header.menu.destroy();
    grid_header.menu = null;  
  }
}