How do I add filters and filter the data correctly?

Question

i have window ExtJS:

let height = Ext.getBody().getViewSize().height,
width = Ext.getBody().getViewSize().width,
store = Ext.create('CRM.store.MessageCenter.Messages.List');

Ext.define('CRM.window.MessageCenter.Messages.List', {
    extend: 'Ext.window.Window',
    xtype: 'window',
    name: 'MessageCenter_Messages_List_Window',
    iconCls: 'mails',
    title: 'MessageCenter_Messages',
    width: width,
    height: height - 26,
    x: 0,
    y: 26,
    layout: 'fit',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayInfo: true,
        extend: 'Ext.PagingToolbar',
        displayMsg: 'Shown {0} - {1} from {2}',
        emptyMsg: "There is no data to display",
    }],
    initComponent: function() {
        var that = this;
        that.store = store;
        that.dockedItems[0].store = store;
        this.callParent();
    },
    items: [{
        xtype: 'grid',
        name: 'MessageCenter_Messages_List_Grid',
        border: false,
        store: store,
        columns: [
            {
                text: 'ID',
                dataIndex: 'id',
                width: 100,
                hidden: false
            },
            {
                text: 'Date of creation',
                dataIndex: 'date',
                width: 150,
                xtype: 'datecolumn',
                format: 'd.m.Y H:i:s',
                hidden: false
            },
        ],

    }],
});

My store:

let name = 'CRM.store.MessageCenter.Messages.List';
Ext.define(name, {
    extend: 'Ext.data.Store',
    autoLoad: true,
    pageSize: 35,
    fields: [
        'id',
        'date',
    ],
    sorters: [{
        property: 'date',
        direction: 'DESC',
    }],
    proxy: {***},
});

I need to add filters to select data from the database. For example, by date or ID, but I do not know how to do it correctly. And whether it is necessary to use data models in my case. Please tell me, I'm just starting to learn ExtJS, thank you for your help.

Answer 1

It is not necessary to use data models (but it will be nice). To use user defined filters you can use this plugin. AFAIK you need remote filter, so set 'remoteFilter' property of the store to true. Something like the following sample:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sci-Fi Television',
    height: 250,
    store: Ext.create('Ext.data.Store', {
        fields: ['id', 'show'],    
        model: 'User',
        proxy: {
            type: 'ajax',
            url: 'data1.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        autoLoad: true,
        remoteFilter: true, // Server side filtering.
    }),
    plugins: 'gridfilters',
    columns: [{
        dataIndex: 'id',
        text: 'ID',
        width: 50
    }, {
        dataIndex: 'show',
        text: 'Show',
        flex: 1,
        filter: {
            // required configs
            type: 'string',
            // optional configs
            value: 'star', // setting a value makes the filter active.
            itemDefaults: {
                // any Ext.form.field.Text configs accepted
            }
        }
    }]
});

This sample will send the following filter properties:

[{"operator":"like","value":"starrr","property":"show"}]