javascript - 如何在页面加载时启用 Extjs 过滤器

Question

我想用激活某些过滤器的不同按钮来过滤我的网格。但是，它们不适用于页面加载。只有当您选择/取消选择过滤器选项然后单击按钮时，过滤器才会真正启动。

当页面首次加载并单击按钮时，会出现以下错误:

TypeError: filter is undefined

如何在页面首次加载时启用这些过滤器设置？

重现错误。加载 fiddle 并尝试单击按钮并注意它们不起作用。然后激活其中一个过滤器并重试。激活过滤器后，按钮将起作用。

Fiddle

按钮

 var openButton = Ext.create('Ext.Button', {
            text: 'Open Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                filter.setActive(true);
                filter.setValue('Open/Current');
            }
        });
        var holdButton = Ext.create('Ext.Button', {
            text: 'On Hold Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                filter.setActive(true);
                filter.setValue('Hold');
            }
        });
        var closedButton = Ext.create('Ext.Button', {
            text: 'Closed Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                filter.setActive(true);
                filter.setValue('Archived/Closed');
            }
        });

列

columns: [{
        text: 'Title',
        width: 260,
        dataIndex: 'Title',
        filterable: true,
        filter: {
            type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
        }
    }, {
        text: 'Description',
        flex: 1,
        dataIndex: 'Description',
        filter: {
            type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
        }
    }, {
        text: 'Modified',
        width: 90,
        dataIndex: 'Modified',
        xtype: 'datecolumn',
        format: 'm/d/Y',
        filter: true
    }, {
        text: 'Status',
        width: 100,
        dataIndex: 'TopicStateValue',
        filter: {
            active: true,
            type: 'list',
            value: 'Open/Current',
            options: ['Open/Current', 'Archived/Closed', 'Hold']
        }
    }]

Answer 1

在给它传值之前检查过滤器是否存在，如果不存在，像这样添加:

 var openButton = Ext.create('Ext.Button', {
            text: 'Open Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                if (!filter) {
                    filter = grid[uniqueId].filters
                            .addFilter({
                                type : 'string',
                                dataIndex : 'TopicStateValue'
                            });
                }
                filter.setActive(true);
                filter.setValue('Open/Current');
            }
        });
        var holdButton = Ext.create('Ext.Button', {
            text: 'On Hold Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                if (!filter) {
                    filter = grid[uniqueId].filters
                            .addFilter({
                                type : 'string',
                                dataIndex : 'TopicStateValue'
                            });
                }
                filter.setActive(true);
                filter.setValue('Hold');
            }
        });
        var closedButton = Ext.create('Ext.Button', {
            text: 'Closed Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('TopicStateValue');
                if (!filter) {
                    filter = grid[uniqueId].filters
                            .addFilter({
                                type : 'string',
                                dataIndex : 'TopicStateValue'
                            });
                }
                filter.setActive(true);
                filter.setValue('Archived/Closed');
            }
        });