How to make a filter in the columns of the table?

Question

JavaScript

I've been playing for more than an hour with column filtering. For some reason, the CheckBox filtering in the columns is not displayed.

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.selection.CellModel',
    'Ext.window.MessageBox',
    'Ext.ux.grid.FiltersFeature',
    'Ext.ux.grid.filter.ListFilter'
]);

Ext.onReady(function() {

    var filters = {
        ftype: 'filters',
        encode: false,
        local: true
    };
    
    Ext.define('Stock', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
            {name: 'symbol', type: 'string'},
            {name: 'open', type: 'float'},
            {name: 'last', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'type', type: 'string'},
            {name: 'split', type: 'boolean'},
            {name: 'date', type: 'date'},
            {name: 'level', type: 'int'}
        ]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'Stock',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            api: {
                read: 'stocks_4.php?action=view',
                create: 'stocks_4.php?action=create',
                update: 'stocks_4.php?action=update',
                destroy: 'stocks_4.php?action=destroy'
            },
            writer: {
                type: 'json',
                writeAllFields: true,
                root: 'data'
            },
            reader:{
                type: 'json',
                root: 'data',
                messageProperty: 'message'
            }
        }
    });

    function change(val) {
        var s = Ext.util.Format.number(val,'0.00');
        if (val > 0) {
            return '<span style="color:green;">' + s + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + s + '</span>';
        }
        return val;
    }

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });

    var grid = Ext.create('Ext.grid.GridPanel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        dockedItems: [
            {
            xtype: 'toolbar',
            items: [
                {
                iconCls: 'icon-add',
                text: 'Додати',
                scope: this,
                handler: function(){
                    var rec = new Stock({
                        id  : null,
                        open: 0,
                        last: 0
                    });
                    store.insert(0, rec);
                }
            }, {
                iconCls: 'icon-delete',
                text: 'Видалити',
                itemId: 'delete',
                scope: this,
                handler: function(){
                    var row = grid.getView().getSelectionModel().getCurrentPosition().row;
                    if (row) {
                        store.removeAt(row);
                    }

                }
            }, {
                text: 'Синхронізувати',
                itemId: 'sync',
                scope: this,
                handler: function(){
                    store.sync();
                }
            }]
        },
            {
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'tbtext',
                    text: '<b>Параметри:</b>'
                }, ' ', {
                    text: 'Автосинхронізація',
                    enableToggle: true,
                    pressed: true,
                    tooltip: 'Коли увімкнена - сховище автоматично зберігатиме дані',
                    scope: this,
                    toggleHandler: function(btn, pressed){
                        store.autoSync = pressed;
                    }
                }, {
                    text: 'Пакетний режим',
                    enableToggle: true,
                    pressed: true,
                    tooltip: 'Коли увімкнений, сховище намагатиметься відправляти зміни до декількох записів одним запитом',
                    scope: this,
                    toggleHandler: function(btn, pressed){
                        store.getProxy().batchActions = pressed;
                    }
                }, {
                    text: 'Зберігати всі поля',
                    enableToggle: true,
                    pressed: true,
                    tooltip: 'Коли увімкнено, на сервер відправлятимуться усі поля, а не лише змінені',
                    scope: this,
                    toggleHandler: function(btn, pressed){
                        store.getProxy().getWriter().writeAllFields = pressed;
                    }
                }]
            }],
        columns: [
            {
                text: 'ID',
                width: 15,
                align: 'center',
                hidden: true,
                dataIndex: 'id',
                editor: {

                }
            },
            {
                text: 'Company',
                flex: 1,
                hideable: false,
                dataIndex: 'name',
                editor:{
                    sllowDlank: false
                },
                filterable: true
        
                
            },
            {
                text     : 'Symbol',
                width    : 75,
                sortable : false,
                dataIndex: 'symbol',
                filter: {
                    type: 'list',
                    options: ['MSFT', 'NOK', 'ORCL', 'SBUX']
                }    
            },
            {
                text     : 'Split',
                xtype      : 'booleancolumn',
                align      : 'center',
                trueText : 'Yes',
                falseText: 'No',
                dataIndex: 'split',
                filterable: true
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('d.m.Y'),
                dataIndex: 'date',
                filterable: true,
                editor: {
                    xtype: 'datefield',
                    format: 'd.m.Y',
                    minValue: '01.01.2012',
                    disabledDays: [0, 6],
                    disabledDaysText: 'На вихідні торги не проводяться'
                }
            }
        ],
        height: 350,
        width: 800,
        title: 'Table stocks',
        renderTo: "grid-example",
        features: [filters],
        selModel: {
            selType: 'cellmodel'
        },
        plugins: [cellEditing]
    });
});

Help.. I can't figure out what I'm doing wrong!!!