Extjs 实现级联查询的同时支持模糊查询

在ExtJS中，实现级联查询（也称为关联查询或懒加载）同时支持模糊查询通常涉及到数据操作和视图组件的结合。以下是一个简单的步骤描述：

1. **模型设计**：
- 设计好你的数据模型，如通过`hasMany`或`belongsTo`关联其他表，比如`User`和`Role`之间有层级关系。

2. **Store配置**：
- 创建Store时，设置`proxy`属性为`Ajax`，并指定`api` URL用于获取数据。同时，可以配置`loadMask`和`remoteFilter`来显示加载提示并远程过滤数据。

var rolesStore = new Ext.data.Store({
    model: 'Role',
    proxy: {
        type: 'ajax',
        url: '/api/roles',
        reader: { type: 'json', root: 'data' },
        remoteFilter: true // 这里启用模糊搜索
    },
    listeners: {
        load: function() {
            // 级联加载
            this.getRelated('users'); // 假设已经实现了级联加载用户的功能
        }
    }
});

3. **View绑定**：
- 在Grid、TreePanel等视图上绑定Store，并设置`store`属性，同时设置列配置来展示级联的数据。

4. **Search功能**：
- 使用`filter`方法应用模糊查询，用户输入搜索框的内容作为过滤条件。例如，在用户选择角色后，可以在后台添加一个事件处理器处理搜索请求。

searchField = Ext.getCmp('roleSearchField');
searchField.on('change', function() {
    rolesStore.filterBy(function(record) {
        return record.get('name').toLowerCase().indexOf(searchField.getValue().toLowerCase()) !== -1;
    });
}, this);