ExtJs - 在列標題中篩選具有搜索字段的網格

Question

在ExtJs中，有許多選項可用於過濾網格。文檔中有兩個很好的示例，如this question中所引用的示例。

1. Remote filtering
2. Local filtering

然而，其隱藏在Ext.ux.grid.FiltersFeature默認下拉菜單中的過濾器找我好不尷尬。一個好的符合人體工程學的選擇會在列標題中創建搜索字段，例如his question中的@Ctacus顯示。

這是如何實現的？

Answer 1

經過對稀疏文檔的大量研究，並感謝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描述工作：

• anyMatch
• caseSensitive
• exactMatch
• operator
• additionnaly可以使用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，在following bug and its workaround是有關這一點，否則該列不能flex編輯。

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