Ext JS的4：网格列表过滤器不更新(Ext JS 4: Grid List Filter is

我当我尝试动态设置网格过滤器列表中运行一个奇怪的问题。

让我通过我的代码片段解释

我有一个筛选器列表的列被定义为

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

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

                    }
        }

我从店“viewready”初始化列表

 viewready: function(cmp,eOpts){

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

===>做工不错

现在，我有当用户移动到下一个页面构建基于记录的新客户商店。 因此，我建店页面的“变”事件

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



                } 
           } 

我现在可以看到在clientsStore新的数据。 但不更新网格筛选器列表。 仍表现出旧数据。 我试图刷新，布局等没有什么帮助

任何帮助将不胜感激

由于Tharahan

Answer 1:

只是改变一个属性的值不会影响渲染或计算的状态的组件。 当第一次初始化列表中创建菜单。 当你第一次做到这一点，它的工作原理是因为在初始化之前的，但第二次，这是为时已晚。

如果你可以抓住的实例化一个参考ListFilter ，我想你可能会迫使这样的菜单的娱乐：

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

因此，假设你有你的目标参考grid ，你可以更改与列选项dataIndex通过类似这样的一个叫“topAccount”的：

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

---编辑---

OK，完整的例子。 测试工作 。

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

Answer 2:

我在解决类似的问题，这个问题的答案对我帮助很大。 本地列表过滤菜单，其实是懒加载（只点击时创建的），我需要设置过滤器菜单如果电网商店已重新加载不同的数据重新加载。 解决它的每个重装后销毁菜单，使在下次点击菜单重建：

var on_load = function() {
  var grid_header = me.gridPanel.filters.view.headerCt

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

文章来源: Ext JS 4: Grid List Filter is NOT updated