Formatting date column in GridPanel

[zpyoung]

I'm having issues with formatting a date column in a GridPanel. I have tried and googled for example on how do to this but have not had any luck. I have play with both versions of Ext JS 2 and 3 and still not able to format the date.

My JSON result looks like the follow example. Which I understand to be the ISO format.

{"Title":"test","Url":"http://zach.com","Date":"2009-02-02T00:00:00.0000000","Duration":"1:20","Id": }

I can also have my results return the follow format if it is better.

{"Title":"test","Url":"http://zach.com","Date":new Date(1233554400000),"Duration":"1:20","Id":1}

The JsonStore that I have working is the follow. Which I would think is letting the grid know the current format since it could be JavaScript or ISO.

SharpJs.RecordingsStore = new Ext.data.JsonStore({
        data: SharpJs.RecordingsData,
        fields: [
            {name:'Id'}
            ,{name:'Title'}
            ,{name:'Url'}
            ,{name: 'Date', mapping: 'Date', type: 'date', dateFormat:'c'},
            ,{name:'Duration'}
        ],
        sortInfo: { field: 'Id', direction: 'ASC' }
    });

Then my ColumnModel is the following which is not having any impact on the format. I would like the format to be the ShortDate. What this grid is display is the following.

 Mon Feb 02 2009 00:00:00  GMT-6:00 (Central Time Zone).

 SharpJs.RecordingsColumnModel = new Ext.grid.ColumnModel([
            { header: 'Title', dataIndex: 'Title' }
            ,{ header: 'Url', dataIndex: 'Url' }
            ,{ header: 'Date', dataIndex: 'Date', render:function(value) { return new Date(value).format(Date.patterns.ShortDate); }  }
            ,{ header: 'Duration', dataIndex: 'Duration' }
        ]);

1. Which the correct or prefered format ISO or JavaScript?
2. What is the correct syntax for the ColumnModel and JsonStore to format a date column in a grid panel?

If I have missed any details let me know.

[mystix]

re:

1. stick with ISO-8601 date format.
2. 
   there's no "render" config.
   see http://extjs.com/docs/?class=Ext.gri...ember=renderer
   
   your ColumnModel definition should read
   

   { 
       header: 'Date', 
       dataIndex: 'Date', 
       renderer: Ext.util.Format.dateRenderer(Date.patterns.ShortDate)
   }

p.s. are you sure Date.patterns.ShortDate is defined?
be sure to check that.

[Bucs]

Was this ever solved? I am having the exact same problem, but I am using "renderer" correctly in the column config.

Basically I have a store that retrieves data from the server, with a Date column that is loaded with the value "2009-06-01T07:00:00.0000000" into a field of type "date".

I am then manually looping thru this store and adding the records to another store, which feeds a grid panel. The receiving store is configured as follows:

       // Setup the database Store call to retrieve record collection
       var store = new Ext.data.Store({
           reader: new Ext.data.JsonReader(
            { root: 'data', id: 'CaseTicketId' },
              Ext.data.Record.create([
                { name: 'CaseTicketId', type: 'string' },
                { name: 'SurgeryStart', type: 'date', dateFormat: 'Y-m-dTH:i:s.u'},
                { name: 'HospitalName', type: 'string' },
                { name: 'SurgeonLastName', type: 'string' },
                { name: 'ProcedureName', type: 'string' }
            ])
           ),
           autoLoad: false
       });

And the column config that this store feeds is as follows:

columns: [
...
  { id: "SurgeryDate", header: "Date", width: 70, sortable: true, dataIndex: 'SurgeryStart', renderer: Ext.util.Format.dateRenderer('m/d/Y') },
  { id: "SurgeryTime", header: "Time", width: 60, sortable: true, dataIndex: 'SurgeryStart', renderer: Ext.util.Format.dateRenderer('g:i A') },
....

Neither one of these fields are working...both receiving NaN in the numeric date pieces. What gives here? When I pass a the same JSON collection that is loading into store 1 direclty back to the grid store (store 2), rather than add manually by looping thru store 1 like I am doing now, the above code shows the date correctly in the grid. What am I doing wrong? Why can I not pass a record with a date field type containing the ISO date value "2009-06-01T07:00:00.0000000" to a store that has a JsonReader with a field configured to read the format dateFormat: 'Y-m-dTH:i.u', and have the column definition correctly render a date value with the proper renderer setup? Not sure what's up here or where to go for the solution...

Appreciate any help with this. Thanks!

[mystix]

you didn't mention how you're passing data from one Store to the other, nor what either Store's Record definition looks like.

[berend]

Exactly the same thing here. Get NaN/NaN/NaN. Input is Y-m-d (in the XML passed in), record definition has dateFormat: "Y-m-d"; renderer should display it in d-m-Y just as above.

But doesn't work.

[mystix]

post your store and columnmodel definitions.

[berend]

Exactly the same thing here. Get NaN/NaN/NaN. Input is Y-m-d (in the XML passed in), record definition has dateFormat: "Y-m-d"; renderer should display it in d-m-Y just as above.

But doesn't work.

And the resolution is that I didn't have a

type: "date"

property in my Ext.data.Record definition.

[mystix]

hmm... both users above had the type:'date' config in place (which is why i asked for your configs).

that type: 'date' config is essential.

without that, the incoming value from the XML blob will be parsed as a mere string, not as a js Date object.

[ramana_l_v]

I am facing the same problem , I used type: date but still I am facing the same issue. Below is my code which I am using

var reader = new Ext.data.JsonReader({
  totalProperty: 'recordCount',
  successProperty: 'success',
  idProperty: 'pid',
  root: 'records'
}, [
  {name: 'dob', allowBlank: false}
]);


var userColumns =  [
  {header: "Date Of Birth", width: 40, sortable: true, dataIndex: 'dob', type: 'date', editor: new Ext.form.DateField({name: 'dob_date', width:90, allowBlank:false, format:'m-d-Y', renderer:Ext.util.Format.dateRenderer('m-d-Y')     
  }) }
];

I am configuring this in GridPanel, so when dislaying I want the date to be displayed in string with the format 'm-d-Y' and when date is selected I want the date to sent in the same format.

Issues I am facing
1) the format which is shown is coming correct but when I submit the form it is changing to 'Y-m-d' format

2) When the store is displayed in the grid panel when I use the renderer in the grid header the values that are displayed are 'NaNNaNNaN', if I dont use the renderer the exact value present in the shown.

{header: "Date Of Birth", width: 40, sortable: true, dataIndex: 'dob', type: 'date', renderer:Ext.util.Format.dateRenderer('m-d-Y'), editor: new Ext.form.DateField({name: 'dob_date', width:90, allowBlank:false, format:'m-d-Y', renderer:Ext.util.Format.dateRenderer('m-d-Y')     
  }

Thanks,

[mystix]

type:'date' is a Ext.data.Record config, not a GridPanel config:

var reader = new Ext.data.JsonReader({
    totalProperty: 'recordCount',
    successProperty: 'success',
    idProperty: 'pid',
    root: 'records'
}, [
    {name: 'dob', type: 'date', allowBlank: false}
]);

var userColumns =  [{
    header: "Date Of Birth", 
    width: 40, 
    sortable: true, 
    dataIndex: 'dob', 
//    type: 'date',
    editor: new Ext.form.DateField({
        name: 'dob_date', 
        width:90, 
        allowBlank:false, 
        format:'m-d-Y', 
        renderer:Ext.util.Format.dateRenderer('m-d-Y')     
    }) 
}];