View Full Version : TimeField in grid with both editor and custom render

5 Jan 2011, 12:01 AM
I'm using a time field for start/end times.

initially I was using renderer: Ext.util.Format.dateRenderer('H:i:s') which displayed the time as
I wanted - but any edits caused a NaN. Following the existing forum posts I swiched to
a custom renderer which did nothing (except I'm guessing cast from string to date) and it did
make the editing functional - however the display when not editing is now the full date string.

var timeEditor = new fm.TimeField({format:'H:i:s', minValue: '0:01 AM', maxValue: '4:00 AM', increment: 1});
function renderTime(value){
return value;

{header: 'Start',width: 180,dataIndex: 'start_time', editor: timeEditor, renderer: renderTime},
{header: 'End',width: 180,dataIndex: 'end_time',editor: timeEditor, renderer: renderTime},

I've seen (and tried) various renderTime workaround examples like if value.length== 5 then value.format.. which do not work for showing a formatted time.

Does anyone have method of rendering a timefield in a grid which allows formatting the time and editing?

5 Jan 2011, 5:30 PM
I have found a functional answer allowing editing and formatting the time field without getting an nan... or at least not keeping it.
In the actual update function I can convert the time-string back to a date as follows then set the records value to the date.
It does flash NAN for a second - but it works. I think that if the time field could on edit return a datetime value instead of a time string this could be avoided - is it possible to have the time editor use the raw date value instead of the render/formatted string of time.
if ((e.field == 'start_time') || (e.field == 'end_time')) {
var d = new Date('Jan 1, 1970 ' + e.value);

9 Feb 2011, 7:26 AM
Hi Prym!

Seems we had the same problem:
Here is a renderer, which worked for me:


16 Oct 2012, 5:14 AM
Anybody find any solution for this problem...???
Please share it on forum.