The Store

var timesheet = new Ext.data.JsonStore(
    {
        root: 'timesheetEntries',
        url: 'php/scripts/timecardEntry.script.php',
        storeId: 'timesheet',
        autoLoad: true,
        fields: [
            { name: 'id', type: 'integer' },
            { name: 'user_id', type: 'integer' },
            { name: 'ticket_number', type: 'integer' },
            { name: 'description', type: 'string' },
            { name: 'start_time', type: 'string' },
            { name: 'stop_time', type: 'string' },
            { name: 'client_id', type: 'integer' },
            { name: 'is_billable', type: 'integer' }
        ]
    }
);

A section of my GridPanel code:

columns: [
    {
        id: 'ticket_number',
        header: 'Ticket #',
        dataIndex: 'ticket_number'
    },
    {
        id: 'description',
        header: 'Description',
        dataIndex: 'description'
    },
    {
        id: 'start_time',
        header: 'Start',
        dataIndex: 'start_time',
        renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')
    }
...

From the server, I receive this JSON string:

{
   timesheetEntries:[
      {
         "id":"1",
         "user_id":"1",
         "description":null,
         "start_time":"2010-11-13 11:30:00",
         "stop_time":"2010-11-13 15:50:10",
         "client_id":null,
         "is_billable":"0"
      }

My grid panel renders fine. However, my start and stop time columns read 'NaN/NaN/NaN NaN:NaN:NaN' and I don't know why.

The Store

var timesheet = new Ext.data.JsonStore(
    {
        root: 'timesheetEntries',
        url: 'php/scripts/timecardEntry.script.php',
        storeId: 'timesheet',
        autoLoad: true,
        fields: [
            { name: 'id', type: 'integer' },
            { name: 'user_id', type: 'integer' },
            { name: 'ticket_number', type: 'integer' },
            { name: 'description', type: 'string' },
            { name: 'start_time', type: 'string' },
            { name: 'stop_time', type: 'string' },
            { name: 'client_id', type: 'integer' },
            { name: 'is_billable', type: 'integer' }
        ]
    }
);

A section of my GridPanel code:

columns: [
    {
        id: 'ticket_number',
        header: 'Ticket #',
        dataIndex: 'ticket_number'
    },
    {
        id: 'description',
        header: 'Description',
        dataIndex: 'description'
    },
    {
        id: 'start_time',
        header: 'Start',
        dataIndex: 'start_time',
        renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s')
    }
...

From the server, I receive this JSON string:

{
   timesheetEntries:[
      {
         "id":"1",
         "user_id":"1",
         "description":null,
         "start_time":"2010-11-13 11:30:00",
         "stop_time":"2010-11-13 15:50:10",
         "client_id":null,
         "is_billable":"0"
      }

My grid panel renders fine. However, my start and stop time columns read 'NaN/NaN/NaN NaN:NaN:NaN' and I don't know why.

• javascript
• extjs

3 Answers 3

If your data has "2010-11-13 11:30:00" shouldn't your format be 'Y-m-d H:i:s'?

EDIT: Sorry, the grid config should be OK -- I was referring to the dateFormat value in your store's field definition, which should be 'Y-m-d H:i:s' so that your ining data can be properly mapped to your column model. You should also include type: 'date'. You're not showing your store config, but the problem is likely one of those things being wrong.

Try this

function renderDate(v,params,record) { var dt = new Date(v);
if (!isNaN(dt.getDay())) { return dt.format('d/m/Y'); }
return '-'; }

A very simple way to do it:

return Ext.util.Format.date(val,'m/d/Y');