ExtJS gird timefield editor change value after lost focus

Question

I have a grid that for a cell I use a TimeField editor:

{
    text: 'InTime',
    dataIndex: 'InTime',
    editor: {
        xtype: 'timefield',
        format: 'H:i', // 24 hour format
        altFormats: 'H:i', // 24 hour format
        selectOnFocus: true,
        minValue: '12:00 AM',
        increment: 60,
        maxValue: '11:00 PM'
    }

My cells looks like this before and on editing:

enter image description here

At this point everything works fine, when I open the dropdown also everything looks fine:

enter image description here

But after I select a value from the list and change to other cell, then the value updated in the cell is a datetime string format text, like this:

enter image description here

Does anyone knows why is happening this?

Thanks

You always have to specify a renderer, otherwise the toString of your data value is used. The grid does not magically render it like the editor (combo). Just as if you had a regular combo box drop down. See stackoverflow.com/questions/5900294/extjs-grid-combo-box-issue/… — Juan Mendes

nidhi nidhi · Accepted Answer · 2016-11-17T14:51:10

Use format format:'g:i A', in editor renderer: Ext.util.Format.dateRenderer('g:i A') in grid cell field

{
text: 'InTime',
renderer: Ext.util.Format.dateRenderer('g:i A')
dataIndex: 'InTime',
editor: {
    xtype: 'timefield',
    format: 'H:i', // 24 hour format
    altFormats: 'H:i', // 24 hour format
    selectOnFocus: true,
    minValue: '12:00 AM',
    increment: 60,
    maxValue: '11:00 PM'
}

That is because you always have to specify a renderer, otherwise the toString of your data value (the Date) is used. The grid does not magically render it like the editor (combo).

ExtJS gird timefield editor change value after lost focus

2 Answers