Extjs Grid 表头列名过滤

1. 需求

    Ext.grid.Panel中，加入filter plagin后会在列的右下角出现一个菜单，但操作不便，希望能直接在表头的列名位置输入过滤。

    

2. 解决方案

  首先，新建一个Ext.ux.SearchTrigger.js，对于Extjs6放到  \ext\classic\classic\src\ux 下，Ext.ux.SearchTrigger代码：

Ext.define('Ext.ux.SearchTrigger', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.searchtrigger',
    margin:0,
    triggers:{
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function() {
                this.setValue('')
                if(!this.autoSearch) this.setFilter(this.up().dataIndex, '')
            }
        }
    },
    setFilter: function(filterId, value){
        var store = this.up('grid').getStore();
        if(value){
            store.removeFilter(filterId, false)
            var filter = {id: filterId, property: filterId, value: value};
            if(this.anyMatch) filter.anyMatch = this.anyMatch
            if(this.caseSensitive) filter.caseSensitive = this.caseSensitive
            if(this.exactMatch) filter.exactMatch = this.exactMatch
            if(this.operator) filter.operator = this.operator
            console.log(this.anyMatch, filter)
            store.addFilter(filter)
        } else {
            store.filters.removeAtKey(filterId)
            //store.reload()
        }
    },
    listeners: {
        render: function(){
            var me = this;
            me.ownerCt.on('resize', function(){
                me.setWidth(this.getEl().getWidth());
            })
        },
        change: function() {
            if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())
        }
    }
})

  然后，在grid的列中使用searchtrigger

            {
                xtype: 'grid',
                flex: 1,
                columns: [{ 
                    text: ' ', 
                    dataIndex: 'name', 
                    flex: 1,
                    sortable:false ,
                    layout:'fit',
                    items:[{
                        xtype: 'searchtrigger',
                        width: 240,
                        operator:'like',
                        autoSearch: true
                    }]
                }],
                plugins:[{
                    ptype:'gridfilters'
                }]
            }