在网格标题 extjs 6 中过滤答案

【问题标题】：Filter in grid header extjs 6在网格标题 extjs 6 中过滤
【发布时间】：2018-03-19 18:01:58
【问题描述】：

如何在网格标题中创建过滤器？

我找到了这个 sn-p：https://stackoverflow.com/a/22015160/5775332 并更新为与第 6 版兼容：

Ext.define('Fiddle.view.SearchTrigger', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.searchtrigger',

    requires: [
        'Ext.form.trigger.Trigger'
    ],

    defaultListenerScope: true,

    triggers: {
        search: {
            handler: function(field, trigger, e) {
                this.setFilter(this.up().dataIndex, this.getValue());
            },
            cls: 'x-form-search-trigger'
        },
        clear: {
            handler: function(field, trigger, e) {
                this.setValue('');
                if(!this.autoSearch) this.setFilter(this.up().dataIndex, '');
            },
            cls: 'x-form-clear-trigger'
        }
    },
    listeners: {
        render: 'onTextfieldRender',
        change: 'onTextfieldChange'
    },

    onTextfieldRender: function(component, eOpts) {
        var me = this;
        me.ownerCt.on('resize', function(){
            me.setWidth(this.getEl().getWidth());
        });
    },

    onTextfieldChange: function(field, newValue, oldValue, eOpts) {
        if(this.autoSearch) 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();
        }
    }

});

最难的地方 - 在列中创建带有小部件的项目。我无法在 Sencha Fiddle 中重现它。怎么做？

【问题讨论】：

标签： extjs extjs6

【解决方案1】：

首先使用Sencha Forum 凭据登录Sencha Fiddle。在此之后，复制粘贴您的代码并保存。保存后获得的更新 url 将是可共享的。有关Sencha Fiddle 的文档，请参阅此处。

固定代码：https://fiddle.sencha.com/#view/editor&fiddle/2820

【讨论】：