3

我有一个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();
}

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

我也不确定这是否是添加过滤器的推荐方式。我在网上看到了过滤器直接应用于商店的示例，但据我所见，网格不会识别出这些过滤器已到位。

任何帮助将不胜感激。

4

3 回答 3

3

我也必须这样做。它是一个更大的函数的一部分，该函数将 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只有在用户实际单击其中一个时，才会创建网格面板菜单。然后它们都被创建了。我想这是为了节省内存？

显然，在创建过滤器菜单之前，此功能将不起作用。

为了处理这个问题，我在网格面板的事件中明确地创建了它们，afterrender以便它们立即可用。即使用户没有单击过滤器菜单之一，此功能也将起作用。

我正在使用 MVC 模式，所以我从网格面板的控制器中进行了操作，如下所示：

// code from gridpanel's controller
var me = this;
me.control({

    'log': {
        afterrender: function() {
            me.getLog().filters.createFilters();
        },
    },

    // ... other event handlers

});
于 2012-07-23T04:15:19.417 回答
1

在你的网格初始化代码中试试这个

filtersCfg.createFilters();

filtersCfg.filters.each(function (filter) {
     filter.setActive(true);
     filter.setActive(false);
});
于 2012-09-17T14:17:32.867 回答
0

你为什么不应用过滤grid.filters器grid.store？Ext.data.Store 有以下方法filter()和clearFilter()

于 2012-07-23T00:58:24.003 回答