CODEWITHSUNDEEP
javascriptextjsextjs5
Gabriel Robaina
Gabriel Robaina

Reputation: 741

How to use more than one gridfilter type on ExtJS?

I am currently working with SQL Timestamp (date + time) values on my columns on the grid panel. To filter that correctly, I need a date and time menu on the column header. A combination of the 'date' and 'number' types would be enough.

In other words, I need a column header menu that has both the date and number types filter menu. How can I manage to apply two filter types to the column header menu? If that doesnt work directly, how to build a custom filter that combines the date and number types?

The number type:

enter image description here

The date type: enter image description here

EDIT: With @abeyaz help i managed to build a custom column filter with number and date fields. Although, I was not able to find a way to make changes to the values on the fields apply to the store's remote filter. How should I go about setting up events to be called when the user presses enter on the number field, for example, to change the store filter array?

enter image description here

Upvotes: 1

Views: 502

Answers (1)

abeyaz
abeyaz

Reputation: 3164

There is no built-in datetime grid filter. However, you can implement it by yourself easily. First, check out date filter code. You must create a class Ext.grid.filters.menu.DateTime extending Ext.grid.filters.menu.Base, like in date class. What you can do is; instead of using datefield in items, you should use a field container that includes datefield and timefield together. Following example would give you an idea:

   menu: {
        items: {
            lt: {
                xtype: 'fieldcontainer',
                label: 'Before',
                placeholder: 'Before...',
                operator: '<',
                weight: 10,
                items: [
                    {
                        xtype: 'datefield', 
                        flex: 1,
                        listeners: {
                            change: 'up.onInputChange'
                        }
                    },
                    {
                        xtype: 'timefield', 
                        width: 80,
                        listeners: {
                            change: 'up.onInputChange'
                        }
                    }
                ]
            }
        }
    }

However, you must also override filtering methods to make it work correct because of different items. I created a fiddle for a fully working example

Upvotes: 2

Related Questions