Ext JS 4:网格列表过滤器未更新 [英] 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

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

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

                    }
        }

我在"viewready"中初始化商店中的列表

I initialize list from store in 'viewready'

 viewready: function(cmp,eOpts){

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

===>效果很好

现在，当用户移至下一页时，我必须基于记录构建新的客户端存储.因此，我在分页的更改"事件中建立了商店

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



                } 
           } 

我现在可以在clientsStore中看到新数据.但是网格过滤器列表未更新.仍显示旧数据.我尝试了刷新，布局等.没有任何帮助

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

任何帮助将不胜感激

谢谢 塔拉汗

推荐答案

仅更改属性的值不会影响组件的呈现或计算状态.列表首次初始化时创建菜单.第一次执行此操作是可行的，因为它在初始化之前，但是第二次则为时已晚.

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.

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

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

因此，假设您有对目标grid的引用，则可以通过类似于以下的调用来更改带有dataIndex的"topAccount"列的选项:

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

-编辑---

好的，完整的例子.经过测试，工作.

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

这篇关于Ext JS 4:网格列表过滤器未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！