Javascript ExtJS网格过滤器未显示

我的视图中有一个ExtJS网格，现在我想添加一些列过滤器。。。 我已经在网上搜索过了，虽然没有成功。 问题是，如果我打开列的子菜单，可以在其中进行排序等。我看不到选项过滤器

以下代码是“我的视图”脚本的一部分：

Ext.define('Project.my.name.space.EventList', {
    extend: 'Ext.form.Panel',
    require: 'Ext.ux.grid.FiltersFeature',

    bodyPadding: 10,
    title: Lang.Main.EventsAndRegistration,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [

                ...

                {
                xtype: 'gridpanel',
                title: '',
                store: { proxy: { type: 'direct' } },
                flex: 1,
                features: [filtersCfg],
                columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Title',
                    text: Lang.Main.CourseTitle,
                    flex: 1,
                    filterable: true
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'StartDate',
                    text: Lang.Main.StartDate,
                    format: Lang.Main.DateFormatJS,
                    flex: 1,
                    filter: { type: 'date' }
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'EndDate',
                    text: Lang.Main.EndDate,
                    format: Lang.Main.DateFormatJS,
                    flex: 1, // TODO: filter
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Participants',
                    text: Lang.Main.Participants,
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'LocationName',
                    text: Lang.Main.Location,
                    flex: 1
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Status',
                    text: Lang.Main.Status,
                    flex: 1, // TODO: filter
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    items: [{
                        icon: 'Design/icons/user_add.png',
                        text: Lang.Main.RegisterForEvent,
                        disabled: true
                    },
                    {
                        icon: 'Design/icons/user_delete.png',
                        text: Lang.Main.Unregister,
                        disabled: true
                    },
                    {
                        icon: 'Design/icons/application_view_list.png',
                        text: Lang.Main.Show,
                        disabled: true
                    },
                    {
                        icon: 'Design/icons/calendar_edit.png',
                        text: Lang.Main.EditButtonText,
                        hidden: true,
                        disabled: true
                    },
                    {
                        icon: 'Design/icons/calendar_add.png',
                        text: Lang.Main.PlanCourse,
                        hidden: true
                    }]
                }]
                }
            ]
        });

        me.callParent(arguments);

        ...

        this.grid = this.query('gridpanel')[0];

        this.grid.on('selectionchange', function (view, records) {
            var selection = me.grid.getSelectionModel().getSelection();
            var event = (selection.length == 1) ? selection[0] : null;
            var registered = event != null && event.data.Registered;
            me.registerButton.setDisabled(registered);
            me.unregisterButton.setDisabled(!registered);
            me.showButton.setDisabled(!records.length);
            me.editButton.setDisabled(!records.length);            

        });
    }
});

下面是代码的pastebin链接：

更新

刚刚注意到在调试时，我在这一行的

FiltersFeature.JS

文件中发现了一个JS错误：

createFilters: function() {
        var me = this,
            hadFilters = me.filters.getCount(),
            grid = me.getGridPanel(),
            filters = me.createFiltersCollection(),
            model = grid.store.model,
            fields = model.prototype.fields,
Uncaught TypeError: Cannot read property 'prototype' of undefined
            field,
            filter,
            state;

---

请帮帮我

有几个语法错误

• 是栅格要素，而不是零部件
• 您不能

  扩展

  对象文字（如果我错了，请纠正我）

按如下方式使用过滤器：

var filtersCfg = {
    ftype: 'filters',
    local: true,
    filters: [{
        type: 'numeric',
        dataIndex: 'id'
    }]
};

var grid = Ext.create('Ext.grid.Panel', {
     features: [filtersCfg]
});

---

是的，没错。我确实在这里发布了一个旧代码。。已删除exends属性。。。您现在是否尝试了您的代码。。仍然不工作..:/刚刚更新了原始帖子（不知怎么的，我确实收到了一个JS错误），你能更新网格代码吗？我想你需要为你的商店配置一个模型。是的，你的提示是正确的。我已经在我的控制器fia setProxy（..）中设置了如下模型：

grid.getStore（）.setProxy（{type:'direct'，model:'SCT.model.training.event.CourseEvent'，api:{read:SCT.Service.training.event.GetEvents}）。虽然我想这还不够。现在，我已经在视图中将模型添加到了我的商店中，它工作正常：）THX