ExtJs-स्तंभ शीर्षलेख में खोज फ़ील्ड के साथ ग्रिड को फ़िल्टर करें



filter grid (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
  • अतिरिक्त आप autoSearch उपयोग कर सकते हैं यदि सत्य है, तो आपके द्वारा टाइप किए गए फ़िल्टर खोजते हैं, यदि झूठे या सेट नहीं किए गए हैं, तो फ़िल्टर को लागू करने के लिए किसी को खोज आइकन पर क्लिक करना होगा।

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 के लिए, निम्न बग और उसके समाधान इस के लिए प्रासंगिक है, अन्यथा कॉलम 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())
        }
    }
})

एक्स्टजे में, ग्रिड को फ़िल्टर करने के कई विकल्प हैं दस्तावेज में दो अच्छे उदाहरण हैं, जैसे कि इस प्रश्न के संदर्भ में।

  1. रिमोट फिल्टरिंग
  2. स्थानीय फ़िल्टरिंग

हालांकि, Ext.ux.grid.FiltersFeature के डिफ़ॉल्ट ड्रॉपडाउन मेनू में छिपा हुआ फ़िल्टर मेरे लिए बहुत अजीब लग रहा है। एक अच्छा एर्गोनोमिक पसंद कॉलम हेडर में खोज फ़ील्ड बनाना होगा, जैसे कि @टाटास अपने प्रश्न में दिखाता है

यह कैसे हासिल किया जा सकता है ?