How can I get a GridPanel to show the correct time in ExtJS 4?

Question

I have a GridPanel with ExtJS 4. One of the columns returns a timestamp in the following format:

1900-01-01 14:00:00.0

This is my column from my JsonStore

{
    name: 'clockOut',
    mapping: 'clockOut',
    dateFormat: 'H:i A',
    type: 'date'
}

I just want to show the time section but all I get back is a blank column. When I remove the type: 'data' I get the data but in the above format.

Any suggestions?

Thanks

Answer 1

You could add a renderer to the column that formats it the way you want:

{
 name: 'clockOut',
 mapping: 'clockOut',
 renderer: dateRenderer
}

And then a function for dateRenderer:

function dateRenderer(value, id, r) {
 var d = new Date(r.data['clockOut']);
 return d.format('H:i A');
}

Answer 2

You could even use ExtJS built in renderer instead of defining your own function:

renderer: Ext.util.Format.dateRenderer('H:i A')