Ext JS 4: Grid List Filter is NOT updated

Question

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

         { 
            text        : 'Client',
            dataIndex   : 'topAccount', 
            itemId  : 'exTopAccount',

            filter: {
                       type: 'list',
                       options:[]

                    }
        }

I initialize list from store in 'viewready'

 viewready: function(cmp,eOpts){

                    cmp.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
            }

===> WORKS GOOD

Now, I have to build the new client store based on the records when user moves to next page. Therefore I build the store in the 'change' event of paging

listeners: {
               'change' :function( toolbar, pageData, eOpts ) { 
                   var store = Ext.StoreManager.get('ExceptionRecords');
                   clientsStore.removeAll(true);
                    store.each(function(record){                           
                         if(clientsStore.findRecord('topAccount',record.data.topAccount.trim()) == null ) {                                 
                            clientsStore.add({topAccount: record.data.topAccount.trim()})
                         }
                    })      
                    Ext.getCmp('exceptionGridContainer').view.refresh;
                    Ext.getCmp('exceptionGridContainer').view.getHeaderCt().doLayout;


                    console.log(clientsStore);
                    Ext.getCmp('exceptionGridContainer').view.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');



                } 
           } 

I can now see the new data in clientsStore . But Grid filter list is not updated. still showing old data. I tried refresh,layout etc. Nothing helps

Any help will be appreciated

Thanks Tharahan

Answer 1

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.headerCt

  if (grid_header.menu) {
    grid_header.menu.destroy();
    grid_header.menu = null;  
  }
}

Answer 2

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']
            });
        }
    }]
});