在Ext Js的网格列菜单过滤器中限制输入值并启用特定字符

Question

I have been using Ext Js' column menu number filter type to send actions for my backend to filter time values. For that, I would like the number type column menu filters to enable the ":" character, and/or limit the input values between 0 and 24.

In case it is possible to include the ":" character, I would like to check for the 24 hours constraint only on the first two digits, or until the first ":" character.

How can I make those modifications on the column menu?

This is the menu I am talking about:

This is my mainViewPort (where the dateColumn is included)

ut: {
    type: 'fit'
},
controller: 'Queue',
enableTextSelection: true,
items: [
    {
        xtype: 'gridpanel',
        title: 'Autopilot Monitor',
        titleAlign: 'center',
        store: 'AutopilotQueueStore',
        id: 'grid',
        plugins: 'gridfilters',
        maxRows: 20,
        selModel: {
            selType: 'cellmodel',
            mode: 'SINGLE'
        },
        listeners: {
            filterchange: 'onFilterChangeAlt'
        },
        columns: [
            {
                xtype: 'gridcolumn',
                id: 'creationTime',
                align: 'center',
                dataIndex: 'creationTime',
                text: 'Time',
                filter: {
                    type: 'number',

                },
                minWidth: 90,
                flex: 0.8
            },
        ],
    }
]

});

Answer 1

You need to change column filter. You can do something like:

filter: {
    type: 'list',
    single: true,
    options: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
}

Or do own filter type.

Check example on fiddle (custom filter type) : https://fiddle.sencha.com/#view/editor&fiddle/2rs2