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




grid extjs4 extjs4.2 (2)

विरल प्रलेखन के माध्यम से बहुत अधिक शोध करने के बाद, और 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 के डिफ़ॉल्ट ड्रॉपडाउन मेनू में छिपा हुआ फ़िल्टर मेरे लिए बहुत अजीब लग रहा है। एक अच्छा एर्गोनोमिक पसंद कॉलम हेडर में खोज फ़ील्ड बनाना होगा, जैसे कि @टाटास अपने प्रश्न में दिखाता है

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


accept विशेषता अविश्वसनीय रूप से उपयोगी है। यह केवल उन फ़ाइलों को दिखाने के लिए ब्राउज़रों के लिए एक संकेत है जिन्हें वर्तमान input लिए अनुमति है। हालांकि इसे आम तौर पर उपयोगकर्ताओं द्वारा ओवरराइड किया जा सकता है, यह उपयोगकर्ताओं को डिफ़ॉल्ट रूप से परिणामों को कम करने में मदद करता है, इसलिए वे एक सौ अलग-अलग फ़ाइल प्रकारों के बिना बिना किसी चीज के खोज सकते हैं।

प्रयोग

नोट: ये उदाहरण वर्तमान विनिर्देश के आधार पर लिखे गए थे और वास्तव में सभी (या किसी भी) ब्राउज़र में काम नहीं कर सकते हैं। भविष्य में विनिर्देश भी बदल सकता है, जो इन उदाहरणों को तोड़ सकता है।

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }
<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

एचटीएमएल विशिष्टता से ( source )

accept विशेषता को उपयोगकर्ता एजेंटों को यह संकेत देने के लिए निर्दिष्ट किया जा सकता है कि किस फ़ाइल प्रकार को स्वीकार किया जाएगा।

यदि निर्दिष्ट किया गया है, तो विशेषता में अल्पविराम से अलग टोकन का एक सेट होना चाहिए, जिनमें से प्रत्येक निम्न में से किसी एक के लिए एक ASCII केस-असंवेदनशील मिलान होना चाहिए:

स्ट्रिंग audio/*

  • इंगित करता है कि ध्वनि फ़ाइलों को स्वीकार किया जाता है।

स्ट्रिंग video/*

  • इंगित करता है कि वीडियो फाइलें स्वीकार की जाती हैं।

स्ट्रिंग image/*

  • इंगित करता है कि छवि फ़ाइलों को स्वीकार किया जाता है।

कोई पैरामीटर के साथ एक मान्य एमआईएम प्रकार

  • इंगित करता है कि निर्दिष्ट प्रकार की फाइलें स्वीकार की जाती हैं।

एक स्ट्रिंग जिसका पहला अक्षर यू +002 ई पूर्ण स्टॉप कैरेक्टर है (।)

  • इंगित करता है कि निर्दिष्ट फ़ाइल एक्सटेंशन वाली फ़ाइलें स्वीकार की जाती हैं।