带文本框的网格过滤器extjs

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