Ext JS 4:网格列表过滤器没有更新

Ext JS 4: Grid List Filter is NOT updated

本文关键字：过滤器 更新 列表 网格 JS Ext      更新时间：2023-09-26

当我尝试动态设置网格过滤器列表时，我遇到了一个奇怪的问题。

让我用我的代码片段来解释

我有一个列，过滤器列表被定义为

         { 
            text        : 'Client',
            dataIndex   : 'topAccount', 
            itemId  : 'exTopAccount',
            filter: {
                       type: 'list',
                       options:[]
                    }
        }

从'viewready'中初始化list 

 viewready: function(cmp,eOpts){
                    cmp.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
            }

===> WORKS GOOD

现在，当用户移动到下一页时，我必须基于记录构建新的客户端存储。因此，我在分页

的'change'事件中构建存储
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

仅仅改变属性的值不会影响组件的呈现或计算状态。菜单是在列表第一次初始化时创建的。第一次这样做，它可以工作，因为这是在初始化之前，但第二次，那就太迟了。

如果您可以获取对实例化的ListFilter的引用，我认为您可以强制以这种方式重新创建菜单:

listFilter.menu = listFilter.createMenu({
    options: [ ... ] // new options
    // rest of the filter config
});
因此，假设您有一个对目标grid的引用，您可以通过类似于以下的调用来更改"topAccount"的dataIndex列的选项: 
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—

好，完整的示例。测试工作。

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

我正在解决类似的问题，这个问题的答案对我帮助很大。本地列表过滤器菜单实际上是延迟加载的(仅在单击时创建)，如果网格存储已经重新加载了不同的数据，我需要设置过滤器菜单来重新加载。通过在每次重新加载后破坏菜单来解决这个问题，所以下次点击菜单会重新创建:

var on_load = function() {
  var grid_header = me.gridPanel.filters.view.headerCt
  if (grid_header.menu) {
    grid_header.menu.destroy();
    grid_header.menu = null;  
  }
}
相关文章：