ExtJS grid renderer time 00:00:00 (hh:mm:ss) with timefield

Question

I have a grid with a TimeField editor. The values are in the following format:

06:00:00 (hh:mm:ss)

Right now everything is fine, except my renderer function doesn't detect the value a a validad Date:

text: 'InTime',
    dataIndex: 'InTime',
    editor: {
        xtype: 'timefield',
        format: 'H:i',
        altFormats: 'H:i',
        selectOnFocus: true,
        minValue: '12:00 AM',
        increment: 60,
        maxValue: '11:00 PM'
    },
    renderer: function (value, metaData, record, row, col, store, gridView) {
        alert(value);
        return Ext.isDate(value) ? Ext.Date.format(value, 'H:i') : value;
    }

When it checks Ext.isDate I get false so that's why afeter selecting a value from timefield is not well formatted.

This is my grid cell image, the first cell is original before I change its value, the second one is the value that it gets after I select from TimeField

Any clue?

Answer 1

I haven't tested your whole code but just on the first glance I saw that you are using

format and altFormats with the same value and both defined as 'H:i' which is 24 hours : minutes, making 12:00 AM and 11:00 PM invalid entries.

It would be important that you posted the data output of your store so we could see the format of your inTime column, also, post the code for your model.

• Instead of using alert, use console.log.

Answer 2

Recently i had the same problem. You should use the format property for the column and the editor:

 {
        xtype: 'datecolumn',
        header: 'Hora',
        dataIndex: 'time',
        format: 'H:i',
        editor: {
            xtype: 'timefield',
            format: 'H:i'
        }
    }

This work for me.

Answer 3

Remove type:'string' property from model field definition

fields: [{ name: 'InTime',  }] // don't specify type

And this works

renderer: function (value) {
                return Ext.isDate(value) ? Ext.Date.format(value, 'H:i') : value;
            }