EXT JS Grid Filter View

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',
                    extend: 'Ext.ux.grid.FiltersFeature',
                    title: '',
                    store: { proxy: { type: 'direct'} },
                    flex: 1,
                    features: [{
                        ftype: 'filters',
                        autoReload: false,
                        local: true
                    }],
                    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,
                        filterable: true //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,
                        filter: {
                            type: 'list',
                            options: ['small', 'medium', 'large', 'extra large']
                        }
                    }],
                    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);

        });
    }
});