So I have this small Extjs application which consists of a grid with users. Each user has a field where I send from the server the date when he subscribed as a timestamp value (unix).

Ext.define('AP.model.User', {
        extend: 'Ext.data.Model',
        fields: [
        { name: 'id', type: 'int', persist : false },
        { name: 'date_added', type: 'date', dateFormat: 'timestamp'},
        { name: 'username', type: 'string', persist : false }
    ]
});

The grid has a renderer so I can render that timestamp into a human readable format such as 29-Oct-2011 04:00 am:

...
{
    header: 'Date added',
    align: 'center',
    sortable: true,
    dataIndex: 'date_added',
    width: 140,
    fixed: true,
    renderer: Ext.util.Format.dateRenderer('d-M-Y h:i a')
}
...

Now, everything works as intended, the values are displayed correctly but, I also have a form to edit each record in part. In my form, I can edit the date added field by providing a field xtype: 'datefield' which lets me chose the date. When I chose a new date for my record it shows something like 11/29/2011 (from my date above) but when I submit that form to update the record it posts something like this in the request payload: {"date_added": "NaN-NaN-NaNTNaN:NaN:NaN"}.

Can anybody shed a light on how do I go about saving dates in Extjs on fields that are retrieved as timestamps?

So I have this small Extjs application which consists of a grid with users. Each user has a field where I send from the server the date when he subscribed as a timestamp value (unix).

Ext.define('AP.model.User', {
        extend: 'Ext.data.Model',
        fields: [
        { name: 'id', type: 'int', persist : false },
        { name: 'date_added', type: 'date', dateFormat: 'timestamp'},
        { name: 'username', type: 'string', persist : false }
    ]
});

The grid has a renderer so I can render that timestamp into a human readable format such as 29-Oct-2011 04:00 am:

...
{
    header: 'Date added',
    align: 'center',
    sortable: true,
    dataIndex: 'date_added',
    width: 140,
    fixed: true,
    renderer: Ext.util.Format.dateRenderer('d-M-Y h:i a')
}
...

Now, everything works as intended, the values are displayed correctly but, I also have a form to edit each record in part. In my form, I can edit the date added field by providing a field xtype: 'datefield' which lets me chose the date. When I chose a new date for my record it shows something like 11/29/2011 (from my date above) but when I submit that form to update the record it posts something like this in the request payload: {"date_added": "NaN-NaN-NaNTNaN:NaN:NaN"}.

Can anybody shed a light on how do I go about saving dates in Extjs on fields that are retrieved as timestamps?

• javascript
• extjs

Share Improve this question Follow asked Dec 22, 2011 at 13:23 Romeo M.Romeo M. 3,27888 gold badges3636 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I did this with a gridpanel recently.

Even though the data returns from the database as a timestamp, using type: date worked fine for me...

// DATA MODEL
Ext.define('Particle', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'particle_id', type: 'long' },
        { name: 'name', type: 'string' },
        { name: 'type', type: 'string' },
        { name: 'start_date', type: 'date' },
        { name: 'sched_date', type: 'date' },
        { name: 'sched_time', type: 'date' },
        { name: 'notes', type: 'string' }
    ]
});

I rendered the date values in the column model as follows, note the renderer: config option. (I am using the field: config option because I used the grideditor extension in this to allow data to be edited in-line on the grid itself - you wouldn't need this if you are editing the values in a seperate form.)

// GRID COLUMN MODEL 
    var columns = [
        {text: "Name", flex: 1, sortable: true, dataIndex: 'name', renderer: function(data,meta,record){meta.attr = 'ext:qtitle="Notes:"ext:qtip="' + record.get('notes') + '"'; return data;}}, 
        {text: "Type", width: 55, sortable: true, dataIndex: 'case_lvl'},
        {text: "RF Started", width: 80, sortable: true, dataIndex: 'start_date', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
        {text: "Sched Date", width: 80, sortable: true, dataIndex: 'sched_date', field: 'datefield', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
        {text: "Sched Time", width: 80, sortable: true, dataIndex: 'sched_time', field: 'timefield', renderer: Ext.util.Format.dateRenderer('g:i A')}
    ];

To answer your question specifically, I returned the date value to the database as a timestamp string by picking it out of the field using Ext.Date.format(). You could add this before submitting the form.

schedDate = Ext.Date.format(Ext.getCmp('schedDate').getValue(),'Y-m-d') + Ext.Date.format(Ext.getCmp('schedTime').getValue(),' H:i:s')

try like this in your data field:

    {xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'Date',
    name: 'date',
    format: 'm d Y'}

and change the format to 'd-M-Y h:i a'