Question

有人帮助我吗？我创建了一个网格并在外部文本字段上添加过滤器，在一个运行的过滤器上，但是当我添加文本字段时它不会运行，当第一个文本字段模糊时，过滤器不会运行。吼叫是我的代码：

filterGrid = function (property, value) {
    var grid = Ext.getCmp('grid');
    grid.store.clearFilter();
    if (value) {
        var matcher = new RegExp(Ext.String.escapeRegex(value), "i");
        grid.store.filter({
            filterFn: function (record) {
                return matcher.test(record.get(property));
            }
        });
    }
};

var grid = new Ext.Panel({
    layout: 'border',
    renderTo: Ext.getBody(),
    height: 500,
    items: [{
            xtype: 'form',
            region: 'north',
            id: 'formPanel',
            bodyPadding: 10,
            height: 75,
            collapsible: true,
            layout: 'hbox',
            items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    labelAlign: 'right',
                    id: 'name',
                    listeners: {
                        change: function (field, value) {
                            filterGrid('name', value);
                        }
                    }
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    labelAlign: 'right',
                    id: 'email',
                    listeners: {
                        change: function (field, value) {
                            filterGrid('email', value);
                        }
                    }
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Phone',
                    labelAlign: 'right',
                    id: 'phone',
                    listeners: {
                        change: function (field, value) {
                            filterGrid('phone', value);
                        }
                    }
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Type',
                    labelAlign: 'right',
                    id: 'type',
                    listeners: {
                        change: function (field, value) {
                            filterGrid('type', value);
                        }
                    }
                }]
        },
        {
            xtype: 'grid',
            region: 'center',
            searchValue: null,
            matches: [],
            currentIndex: null,
            searchRegExp: null,
            caseSensitive: false,
            regExpMode: false,
            matchCls: 'x-livesearch-match',
            defaultStatusText: 'Nothing Found',
            id: 'grid',
            store: {
                fields: ['name', 'email', 'phone', 'type'],
                data: [{
                        name: 'Homer',
                        email: 'homer@simpsons.com',
                        phone: '111-222-333',
                        type: 'Foo'
                    }, {
                        name: 'Marge',
                        email: 'marge@simpsons.com',
                        phone: '111-222-334',
                        type: 'Foo'
                    }, {
                        name: 'Bart',
                        email: 'bart@simpsons.com',
                        phone: '111-221-335',
                        type: 'Bar'
                    }, {
                        name: 'Lisa',
                        email: 'lisa@simpsons.com',
                        phone: '111-221-336',
                        type: 'Bar'
                    }]
            },
            columnLines: true,
            columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 1
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    flex: 1
                }, {
                    text: 'Type',
                    dataIndex: 'type',
                    flex: 1
                }],
      }]
});

亲切的问候

Answer 1

在filterGrid函数中，您将使用grid.store.clearFilter();清除所有过滤器，然后为与已更改的文本字段对应的属性创建单个过滤器。这意味着任何时候都只会有一个过滤器应用于商店。

解决此问题的一种方法是仅删除为特定属性应用的过滤器，而不是清除所有过滤器。然后，您可以为已更改的属性添加（或重新添加）过滤器。为此，您需要识别过滤器。例如：grid.store.filters.getAt(grid.store.filters.length-1).property=property;会使用用于创建它的属性的名称标记每个过滤器。这样您就可以使用

删除特定的过滤器

grid.store.filters.each(function(item) {
    if (item.property === property) {
        grid.store.removeFilter(item);
    }  
})

然后使用

添加过滤器

grid.store.addFilter({
    filterFn: function (record) {
        return matcher.test(record.get(property));
    }
});

请参阅此处的小提琴：https://fiddle.sencha.com/#fiddle/1k74

带有textfield extjs的网格过滤器

1 个答案: