javascriptextjsextjs5

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


Solution

  • 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