extjs - 如何使用 Ext.Js 实现对网格中多个字段的实时搜索/过滤？

Question

我在网格上做过实时搜索。它是根据我提到的过滤器代码的哪一列进行搜索。但我需要根据多列搜索过滤网格记录。在下面的代码中只搜索名称列，因为只提到了过滤器代码中提交的名称。我不知道如何实现多列值搜索？谁能告诉我如何实现？非常感谢。谢谢。

网格代码在这里:

{
                xtype: 'gridpanel',
                flex: 2,
                hidden: false,
                store: store,
                loadMask: true,
                id: 'grid',
                columns: [
                    {id:'id',header: 'ID', width: 100, sortable: true, dataIndex: 'id'},
                    {header: 'Name', width: 150, dataIndex: 'name'},
                    {header: 'Position', width: 150, dataIndex: 'position'},
                    {header: 'Ambition', width: 250, dataIndex: 'ambition'}                    
                ],
                stripeRows: true,               
                title:'Straw Hats Crew',  
            },

liveSearch 文本甚至在此处更改:

onTextFieldChange: function(field, newValue, oldValue, options){
        var grid = Ext.getCmp('grid');
        if(newValue==''){
            grid.store.clearFilter();
        }
        else {
            grid.store.clearFilter();
            grid.store.load().filter([
                {id: 'name', property: "name", value: newValue, anyMatch: true}
            ]);            
        }
    },

Answer 1

像这样的东西应该可以工作。您可以指定一个任意过滤器函数来检查模型中的所有字段。

onTextFieldChange: function(field, newValue, oldValue, options){
    var grid = Ext.getCmp('grid');
    grid.store.clearFilter();

    if (newValue) {
        var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
        grid.store.filter({
            filterFn: function(record) {
                return matcher.test(record.get('id')) ||
                    matcher.test(record.get('name')) ||
                    matcher.test(record.get('position')) ||
                    matcher.test(record.get('ambition'));
            }
        });
    }
}