Question

我有一个网格（Ext.grid.Panel），我需要应用过滤器。这些过滤器将是预定义的（与通过从网格列下拉列表中手动选择它们设置的过滤器相反。）

我有两个功能：

// Clear filter
function() {
    grid.filters.clearFilters();
}

// Apply filter
function() {
    grid.filters.clearFilters();

    grid.filters.addFilter({
        dataIndex: 'size',
        type: 'list',
        options: ['small', 'medium', 'large', 'extra large'],
        value: ['small', 'medium']
    });

    store.load();
}

第一次应用滤镜效果很好。但是，如果您调用该函数来清除过滤器，然后再次尝试应用过滤器，则不会过滤数据。我根本没有收到任何错误或反馈。

我也不确定这是否是添加过滤器的推荐方法。我在网上看过过滤器直接应用到商店的例子，但从我看到的情况来看，网格无法识别这些过滤器是否到位。

非常感谢任何帮助。

Answer 1

我也必须这样做。它是一个更大的函数的一部分，它将JSON“网格格式对象”（包含任意数量的网格过滤器，可见列和排序列和方向）应用于渲染的网格面板。

要求是用户需要能够将现有网格面板的可见列，应用过滤器和应用排序保存到具有名称的数据库中，然后在以后的日期能够将这三个内容重新应用到网格面板中通过选择保存的格式获得相同的过滤器，可见列和排序状态。

我也不想使用商店过滤器，因为所选的过滤器选项需要在网格面板过滤器功能UI（网格过滤器下拉菜单）上可见，以防用户想要调整它们。

以下是用户将保存的网格格式JSON的示例：

{
"columns":[
    "first_name",
    "last_name",
    "course",
    "course_room",
    "student_status",
    "start_date",
    "schedule",
    "time_on_course",
    "attendance",
    "this_period",
    "acct_bal"
  ],
"filters":[{
    "field":"student_status",
    "data":{
        "type":"list",
        "value":"Attending"
    }
}],
"sort":{
        "property":"start_date",
        "direction":"ASC"
    }
}

这是函数，JSON用作参数：

applyLogFormat: function(format) {
    var log = this.getLog(),
        format = Ext.JSON.decode(format);

    log.filters.autoReload = false;

    // apply the grid filters correctly
    log.filters.clearFilters();
    Ext.each(format.filters, function(filter) {
        var gridFilter = log.filters.getFilter(filter.field);

        gridFilter.setActive(true);
        switch(gridFilter.type) {

            case 'date':
                var dateValue = Ext.Date.parse(filter.data.value, 'm/d/Y'),
                    value = filter.data.comparison == 'gt' ? {after: dateValue} : {before: dateValue};

                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.setValue(value);
                break;

            case 'list':
                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.menu.setSelected(gridFilter.menu.selected, false);
                gridFilter.menu.setSelected(filter.data.value.split(','), true);
                break;

            default :
                gridFilter = log.filters.getFilter(filter.field);
                gridFilter.setValue(filter.data.value);
                break;
        }
    });

    // remove any pre-existing sorting from the grid
    Ext.each(log.columns, function(column, index) {
        if (column.hasCls('x-column-header-sort-ASC') ||
            column.hasCls('x-column-header-sort-DESC')) {
            log.columns[index].setSortState(null);
            return false;
        }
    });

    // show only the specified columns
    log.suspendLayout = true;
    Ext.each(log.columns, function(column) {
        if (column.dataIndex) {
            column.setVisible(Ext.Array.contains(format.columns, column.dataIndex));
        }
    });
    log.suspendLayout = false;
    log.doComponentLayout();

    // set the sorter
    if (format.sort) {
        var column = log.down('gridcolumn[dataIndex=' + 
            format.sort.property + ']');
        column.setSortState(format.sort.direction);
        log.filters.autoReload = true;
    } else {
        log.store.sorters.clear();
        log.store.loadPage(1);
        log.filters.autoReload = true;
    }
}

这完全是为4.1.0

完成的

修改

我意识到实现的一个重要部分是从该功能中看不到的。

通常，在用户实际点击其中一个菜单之前，不会创建网格面板filter feature菜单。然后他们都被创造了。我想这是为了节省内存？

显然，在创建过滤器菜单之前，此功能无效。

为了解决这个问题，我在gridpanel的afterrender事件中明确创建它们，以便它们立即可用。即使用户没有单击其中一个过滤器菜单，此功能也将起作用。

我正在使用MVC模式，所以我在gridpanel的控制器中做了这样的事情：

// code from gridpanel's controller var me = this; me.control({ 'log': { afterrender: function() { me.getLog().filters.createFilters(); }, }, // ... other event handlers });

Answer 2

在网格初始化代码中尝试此操作

filtersCfg.createFilters();

filtersCfg.filters.each(function (filter) {
     filter.setActive(true);
     filter.setActive(false);
});

Answer 3

为什么要将过滤器应用于grid.filters而不是grid.store？ Ext.data.Store具有以下方法filter()和clearFilter()

无法将过滤器重新应用于网格

3 个答案: