Question

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

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

TypeError: filter is undefined

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

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

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');
            }
        });

Answer 2

您需要在使用之前手动初始化过滤器。

请将以下代码添加到网格面板。

listeners: {
            beforeRender:function() {
                this.filters.createFilters();
            }
        },

我在你的小提琴上尝试了它并且它有效。

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

2 个答案: