extjs7的grid如何实时过滤
时间: 2024-05-07 15:22:40 浏览: 126
在 ExtJS 7 中,可以使用 `Ext.grid.Grid` 的 `store` 的 `filter` 方法来实现实时过滤。具体实现步骤如下:
1. 在 `store` 中定义筛选器,例如:
```javascript
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`,例如:
```javascript
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` 事件,例如:
```javascript
const filterField = Ext.create('Ext.field.Text', {
label: 'Filter',
listeners: {
change: function(field, newValue) {
store.clearFilter();
if (newValue) {
store.filter('name', newValue);
}
}
}
});
```
在上述代码中,当输入框的值改变时,先清除当前的筛选器,然后根据输入框的值添加新的筛选器。这样就可以实现实时过滤了。