ExtJs - Grid filtering with a search field in the column header

Question

ExtJs has many grid filtering options. There are two nice examples in the documentation, for example, in this matter .

• Remote filtering
• Local filtering

However, having Ext.ux.grid.FiltersFeature hidden in the default drop-down menu looks very inconvenient for me. A good ergonomic choice is to create search fields in column headers, for example, @Ctacus shows in his question .

How can this be achieved?

Answer 1

After quite a bit of research through rare documentation, and also thanks to the big questions and answers in SO, I came up with a simple class that adds this functionality and allows you to create configurations.

It looks like this:

You add this field to your grid as follows:

 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 as described in the document for Ext.util.Filter :

• anyMatch
• caseSensitive
• exactMatch
• operator
• Alternatively, you can use autoSearch . If true, the filter searches by type, if it is set incorrectly or not installed, you must 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, this error and its workaround are relevant, otherwise the column cannot be flex ed.

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