ExtJs - 使用列标题中的搜索字段过滤网格

在 ExtJs 中，有很多过滤网格的选项。文档中有两个很好的示例，如中引用的这个问题 https://stackoverflow.com/questions/11518853/extjs-4-grid-filtering.

1. 远程过滤 http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll-with-filter.html
2. 本地过滤 http://docs.sencha.com/extjs/4.2.2/#!/example/grid-filtering/grid-filter-local.html

但是，将过滤器隐藏在默认下拉菜单中Ext.ux.grid.FiltersFeature http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.grid.FiltersFeature对我来说看起来真的很尴尬。一个很好的符合人体工程学的选择是在列标题中创建搜索字段，就像 @Ctacus 所示他的问题 https://stackoverflow.com/questions/21877638/extjs-4-2-how-to-set-grid-filter-height-when-header-text-is-wrapped.

如何才能实现这一目标？

经过对稀疏文档的大量研究，并感谢 SO 中的大量问题和答案，我想出了一个简单的类，它添加了此功能并允许配置。

它看起来像这样：

您可以像这样在网格中添加此字段：

Ext.define('Sandbox.view.OwnersGrid', {
    extend: 'Ext.grid.Panel',
    requires: ['Sandbox.view.SearchTrigger'],
    alias: 'widget.ownersGrid',
    store: 'Owners',
    columns: [{
        dataIndex: 'id',
        width: 50,
        text: 'ID'
    }, {
        dataIndex: 'name',
        text: 'Name',
    items:[{
        xtype: 'searchtrigger',
        autoSearch: true
    }]
},

下列configs是可能的，并且像文档中描述的那样工作Ext.util.Filter http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.Filter:

• anyMatch
• caseSensitive
• exactMatch
• operator
• 另外你可以使用autoSearch。如果为 true，则过滤器会在您键入时进行搜索；如果为 false 或未设置，则必须单击搜索图标才能应用过滤器。

ExtJs 5 / 6 来源：

Ext.define('Sandbox.view.SearchTrigger', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.searchtrigger',
    triggers:{
        search: {
            cls: 'x-form-search-trigger',
            handler: function() {
                this.setFilter(this.up().dataIndex, this.getValue())
            }
        },
        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())
        }
    }
})

对于 ExtJs 6.2.0，以下错误及其解决方法 https://stackoverflow.com/q/42064892/1951708与此相关，否则该列不能flexed.

ExtJs 4 来源：

Ext.define('Sandbox.view.SearchTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.searchtrigger',
    triggerCls: 'x-form-clear-trigger',
    trigger2Cls: 'x-form-search-trigger',
    onTriggerClick: function() {
        this.setValue('')
        this.setFilter(this.up().dataIndex, '')
    },
    onTrigger2Click: function() {
        this.setFilter(this.up().dataIndex, this.getValue())
    },
    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())
        }
    }
})