ExtJS: Using gridpanel filter Header ignores/resets 我添加的商店过滤器

Question

我正在加载我的商店和网格面板，并像这样分配过滤器

myGrid.store.filter('enabled', 'true');

这是为了过滤掉未启用的记录。这有效，我的网格面板最初显示所有启用的记录等于 true。然后，当我使用网格面板 header 应用过滤器并搜索我知道已启用设置为 false 的记录时，现在出现。

初始分配 store.filter(....) 后的初始网格面板列表删除所有未启用等于 true 的记录，但使用 header 过滤将其包含在新过滤器中。

我遵循了这里的文档： http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.grid.FiltersFeature

所以我有这样的东西:

 Ext.apply(me, {
        width: 500,
        height: 250,
        store: 'BlockItems',
        features: [{
            ftype: 'filters',
            local: true,

从 header 中删除过滤器后，我的列表再次出现，但现在它包括 enabled != true 和 enabled == true 的记录，即所有记录。

我很困惑。我过滤了我的商店，为什么网格 "header filter" 不符合我最初添加的过滤器？

Answer 1

这是设计使然。如果您使用列筛选器，它会从商店中删除所有其他筛选器，因为它不知道您是否要保留它们。

你有三种可能。如果您根本不打算显示禁用的记录，最彻底的方法是在商店中只包含启用的记录。

如果您不想这样做，您可以监听 filterchange 事件并在每次 filterchange 后添加启用的过滤器（检查它是否已经添加，否则会出现无限循环），或者您可以重新定义每个列过滤器的工作方式，以便它们满足您的特殊需求：

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.grid.FiltersFeature-cfg-filters

Answer 2

您可以通过创建 Ext.util.Filter 的新实例并将它们添加到 store 的过滤器来添加新过滤器。

我的 select event 中有以下代码 gridheader combobox:

this.up('grid').getStore().filter(new Ext.util.Filter({
    anyMatch: false,
    disableOnEmpty: true,
    property: field.up('gridcolumn').dataIndex,
    value   : field.getValue()
}));

这是 combobox 的 keyup 的代码：

if (Ext.isEmpty(field.getValue()) && isValidKey === true) {
    this.up('grid').getStore().filter(new Ext.util.Filter({
        anyMatch: false,
        disableOnEmpty: true,
        property: field.up('gridcolumn').dataIndex,
        value   : field.getValue()
    }));
}

这是 gridheader textfield:

的键盘输入

grid.getStore().filter(new Ext.util.Filter({
    anyMatch: true,
    disableOnEmpty: true,
    property: field.up('gridcolumn').dataIndex,
    value   : field.getValue()
}));

正如您在我的 Sencha Fiddle

中看到的那样，它们可以完美地协同工作

ExtJS: Using gridpanel filter Header ignores/resets 我添加的商店过滤器

ExtJS: Using gridpanel filter Header ignores/resets the store filter that I added

javascript

extjs

extjs4

extjs4.2

extjs5