extjs7的grid如何实时过滤

在 ExtJS 7 中，可以使用 `Ext.grid.Grid` 的 `store` 的 `filter` 方法来实现实时过滤。具体实现步骤如下：

1. 在 `store` 中定义筛选器，例如：

const store = Ext.create('Ext.data.Store', {
  fields: ['name', 'age', 'email'],
  data: [
    { name: 'Lisa', age: 21, email: 'lisa@example.com' },
    { name: 'Tom', age: 25, email: 'tom@example.com' },
    { name: 'Mike', age: 30, email: 'mike@example.com' }
  ],
  filters: [
    {
      property: 'age',
      value: 25,
      operator: '>='
    }
  ]
});

2. 在 `grid` 中设置 `store`，例如：

const grid = Ext.create('Ext.grid.Grid', {
  title: 'My Grid',
  store: store,
  columns: [
    { text: 'Name', dataIndex: 'name', flex: 1 },
    { text: 'Age', dataIndex: 'age', flex: 1 },
    { text: 'Email', dataIndex: 'email', flex: 1 }
  ]
});

3. 在需要实时过滤的输入框中添加 `change` 事件，例如：

const filterField = Ext.create('Ext.field.Text', {
  label: 'Filter',
  listeners: {
    change: function(field, newValue) {
      store.clearFilter();
      if (newValue) {
        store.filter('name', newValue);
      }
    }
  }
});

在上述代码中，当输入框的值改变时，先清除当前的筛选器，然后根据输入框的值添加新的筛选器。这样就可以实现实时过滤了。