ExtJs - 在列标题中使用搜索字段过滤网格 [英] ExtJs - Filter a grid with a search field in the column header

问题描述

在 ExtJs 中，有很多选项可以过滤网格.文档中有两个很好的例子，如:

• anyMatch
• 区分大小写
• exactMatch
• 运算符
• 此外，您还可以使用 autoSearch.如果为 true，过滤器会在您输入时进行搜索，如果为 false 或未设置，则必须点击搜索图标才能应用过滤器.

ExtJs 5/6 来源:

Ext.define('Sandbox.view.SearchTrigger', {扩展:'Ext.form.field.Text',别名:'widget.searchtrigger',触发器:{搜索: {cls: 'x-form-search-trigger',处理程序:函数(){this.setFilter(this.up().dataIndex, this.getValue())}},清除: {cls: 'x-form-clear-trigger',处理程序:函数(){this.setValue('')if(!this.autoSearch) this.setFilter(this.up().dataIndex, '')}}},设置过滤器:函数(过滤器Id，值){var store = this.up('grid').getStore();如果(值){store.removeFilter(filterId, false)var filter = {id: filterId, property: filterId, value: value};if(this.anyMatch) filter.anyMatch = this.anyMatchif(this.caseSensitive) filter.caseSensitive = this.caseSensitiveif(this.exactMatch) filter.exactMatch = this.exactMatchif(this.operator) filter.operator = this.operator控制台日志(this.anyMatch，过滤器)store.addFilter(过滤器)} 别的 {store.filters.removeAtKey(filterId)store.reload()}},听众:{渲染:函数(){var me = this;me.ownerCt.on('resize', function(){me.setWidth(this.getEl().getWidth())})},改变:函数(){if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())}}})

对于 ExtJs 6.2.0，以下错误及其解决方法与此相关，否则该列不能flexed.

ExtJs 4 来源:

Ext.define('Sandbox.view.SearchTrigger', {扩展:'Ext.form.field.Trigger'，别名:'widget.searchtrigger',triggerCls: 'x-form-clear-trigger',trigger2Cls: 'x-form-search-trigger',onTriggerClick:函数(){this.setValue('')this.setFilter(this.up().dataIndex, '')},onTrigger2Click:函数(){this.setFilter(this.up().dataIndex, this.getValue())},设置过滤器:函数(过滤器Id，值){var store = this.up('grid').getStore();如果(值){store.removeFilter(filterId, false)var filter = {id: filterId, property: filterId, value: value};if(this.anyMatch) filter.anyMatch = this.anyMatchif(this.caseSensitive) filter.caseSensitive = this.caseSensitiveif(this.exactMatch) filter.exactMatch = this.exactMatchif(this.operator) filter.operator = this.operator控制台日志(this.anyMatch，过滤器)store.addFilter(过滤器)} 别的 {store.filters.removeAtKey(filterId)store.reload()}},听众:{渲染:函数(){var me = this;me.ownerCt.on('resize', function(){me.setWidth(this.getEl().getWidth())})},改变:函数(){if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())}}})

In ExtJs, there are many options to filter a grid. There are two nice examples in the documentation, like referenced in this question.

1. Remote filtering
2. Local filtering

However, having the filter hidden in the default dropdown menu of Ext.ux.grid.FiltersFeature looks really awkward for me. A good ergonomic choice would to create search fields in the column headers, like @Ctacus shows in his question.

How can this be achieved ?

解决方案

After quite much research through the sparse documentation, and thanks to great questions and answers in SO, I came up with a simple class, that adds this functionality and and allows for configurations.

It looks like this:

You add this field in your grid like this:

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
    }]
},

The following configs are possible, and work like described in the doc for Ext.util.Filter:

• anyMatch
• caseSensitive
• exactMatch
• operator
• additionnaly you can use autoSearch. If true, the filter searches as you type, if false or not set, one has to click on the search icon to apply the filter.

ExtJs 5 / 6 Source:

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())
        }
    }
})

For ExtJs 6.2.0, the following bug and its workaround is relevant to this, else the column cannot be flexed.

ExtJs 4 Source:

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())
        }
    }
})

这篇关于ExtJs - 在列标题中使用搜索字段过滤网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！