Extjs 表格grid 搜索过滤查询

因为有需求，所以需要通过输入，按照名称实时查找过滤表格数据，也就是键盘边输入边查找，如下图：

实现方法是通过给表格数据store设置filter的方法进行过滤，此方法官方例子也可以找到，
可以根据需要对对应列进行数据过滤查找。
页面代码如下：

Ext.define('setview.view.user.UpdateEventRuleWin', {
    extend: 'Ext.window.Window',
    requires: [
        'setview.view.set.UserController',
        'setview.view.set.UserModel'
    ],

    controller:'userController',
    viewModel:'userListModel',

    closeAction:'hide',

    width: 550,
    height: 400,

    initComponent: function() {
        var me = this;
        Ext.apply(this, {
            items: [{
                xtype: 'grid',
                itemId:'ruleGridId',
                store:Ext.create('Ext.data.Store',{
                    model: 'Ext.data.Model'
                }),
                columns: [{
                    text: '名称',
                    dataIndex: 'name',
                    width:'40%'
                }, {
                    text: '适用终端',
                    dataIndex: 'pos',
                    width:'15%'
                }, {
                    text: '屏蔽事件',
                    dataIndex: 'event',
                    width:'20%'
                }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'textfield',
                    emptyText: '按名称查找',
                    width: '30%',

                    enableKeyEvents: true,
                    **itemId: 'queryFieldId',**
                    triggers: {
                        bar: {
                            cls: 'x-form-clear-trigger',//有输入时，后边出现一个清空X按钮
                            handler: function() {//点击清空按钮，textfield重置，即清空已输入的数据
                                this.reset();
                                me.getController().filterRule();
                            }
                        }
                    },
                    listeners: {
                        **keyup: {
                            fn: function(field, e) {
                                me.getController().filterRule(); //这里调用控制器的filterRule方法，方法也可以直接写此处
                            }
                        },**
                        buffer: 250
                    }
                }, '->', {
                    xtype: 'button',
                    text: '添 加',
                    handler: function() {
                        me.getController().updateRule('add', null);
                    }
                }, {
                    xtype: 'button',
                    text: '关 闭',
                    handler: function() {
                        this.up("window").close();
                    }
                }]
            }]
        });
        this.callParent();
    }
})

添加一个textfield，监听其keyup事件，实现实时查找。
控制器里的filterRule方法：

/**
     * 按名称查找过滤规则
     */
    filterRule: function() {
        var me = this,
            view = me.getView(),
            ruleGrid = view.queryById("ruleGridId"),
            filterField = view.queryById("queryFieldId"),//查询的输入控件
            filters = ruleGrid.store.getFilters();//当前表格的filter

        if(filterField.value){//有输入值,添加filter
            this.nameFilter = filters.add({
                id:'nameField',
                property:'name',//通过name属性过滤
                value:filterField.value,//值为搜索框输入的值
                anyMatch:true,//模糊匹配
                caseSensitive:false
            });
        }else if(this.nameFilter){//未输入，则移除filter
            filters.remove(this.nameFilter);
            this.nameFilter = null;
        }
    }

如有不清楚，欢迎提问~