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

问题描述

在ExtJs中，有许多过滤网格的选项。文档中有两个很好的例子，如：

• anyMatch / li>
  
• caseSensitive


• exactMatch / li>
  
• 运算符


• addnaly可以使用 autoSearch 。如果为true，则过滤器会在您键入时搜索，如果为false或未设置，则必须单击搜索图标以应用过滤器。

ExtJs 5/6来源：

  Ext.define（'Sandbox.view.SearchTrigger'，{
 extends ：'Ext.form.field.Text'，
 alias：'widget.searchtrigger'，
 triggers：{
 search：{
 cls：'x-form-search-触发'，
处理程序：function（）{
 this.setFilter（this.up（）。dataIndex，this.getValue（））
} 
}，
清除：{
 cls：'x-form-clear-trigger'，
处理程序：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，以下错误及其解决方法与此相关，否则列不能为 flex ed。

ExtJs 4资料来源：

  Ext.define（'Sandbox.view.SearchTrigger'，{
 extends：'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（ '网格'）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（））
} 
} 
 }）
  

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屋！