如何在 ExtJS 上使用一种以上的 gridfilter 类型？答案

【问题标题】：How to use more than one gridfilter type on ExtJS?如何在 ExtJS 上使用一种以上的 gridfilter 类型？
【发布时间】：2019-06-07 11:22:03
【问题描述】：

我目前在网格面板上的列上使用 SQL 时间戳（日期 + 时间）值。为了正确过滤，我需要列标题上的日期和时间菜单。 'date' 和 'number' 类型的组合就足够了。

换句话说，我需要一个包含日期和数字类型过滤器菜单的列标题菜单。如何设法将两种过滤器类型应用于列标题菜单？如果这不能直接起作用，如何构建一个结合日期和数字类型的自定义过滤器？

数字类型：

日期类型：

编辑：在@abeyaz 的帮助下，我设法构建了一个带有数字和日期字段的自定义列过滤器。虽然，我无法找到一种方法来更改适用于商店远程过滤器的字段值。我应该如何设置当用户在数字字段上按 enter 时要调用的事件，例如，更改存储过滤器数组？

【问题讨论】：

标签： javascript extjs extjs5

【解决方案1】：

没有内置的日期时间网格过滤器。但是，您可以轻松地自己实现它。首先，查看日期过滤器代码。您必须创建一个类Ext.grid.filters.menu.DateTime 扩展Ext.grid.filters.menu.Base，就像在日期类中一样。你能做的是；而不是在items 中使用datefield，您应该使用包含datefield 和timefield 的字段容器。下面的例子会给你一个想法：

   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'
                        }
                    }
                ]
            }
        }
    }

但是，由于项目不同，您还必须覆盖过滤方法以使其正常工作。我为fully working example创建了一个小提琴

【讨论】：

该示例很有帮助，但是当我尝试在 Ext.grid.filters.filter.String 上实现该字段容器时，例如，由于缺少事件，我得到了很多错误方法。有没有办法只覆盖 menu.items 并保留所有事件方法？在我看来，这就像一个简单的定制......
我没明白你的意思。如果你能分享一个小提琴，那将是最好的。
我用我的一些进步编辑了这个问题。我无法制作小提琴作品来准确展示我的必需品，所以我想了一张我如何包含它的图片会更有帮助。我目前正在使用 Ext 6.5 经典版。
“up.onInputChange”是您要搜索的内容。看看我是怎么用的。您应该以类似的方式将其用于其他领域。这会使用新过滤器触发商店刷新
“up.onInputChange” 正在我的控制器上寻找具有该名称的方法。这是预期的行为吗？我应该从头开始编写这个方法吗？像这样的方法应该标记过滤器菜单的复选框并更新商店过滤器。