Extjs MVC : Dates showing in grid but loadRecord() cannot load them into form component when clicked

Question

having a bit of a problem here with what should be a pretty simple solution. I have a Contract Model with two date fields :

    { name: 'startDate', type: 'datetime', dateFormat: 'M d Y'},
    { name: 'endDate', type: 'datetime', dateFormat: 'M d Y' }

In the grid these show fine E.g. "Mar 01 2013".

            {
                dataIndex: 'startDate',
                text: 'Start',
                xtype: 'datecolumn',
                format: 'M d Y',
                autoWidth: true
            },
            {
                dataIndex: 'endDate',
                text: 'End',
                xtype: 'datecolumn',
                format: 'M d Y',
                autoWidth: true
            }

When clicking on a grid item i'm loading another panel with a form component in and two datefields.

                    {
                        xtype: 'datefield',
                        name: 'startDate',
                        value: 'startDate',
                        width: 300,
                        disabled: true,
                        hidden: false,
                        fieldLabel: 'Starts'
                    },
                    {
                        xtype: 'datefield',
                        name: 'endDate',
                        value: 'endDate',
                        width: 300,
                        disabled: true,
                        hidden: false,
                        fieldLabel: 'Ends'
                    },

In the controller i'm simply getting the form component and passing the record to the loadRecord method. When I log the two elements from the record I get the following data.

2012-03-01T12:00:00

2013-03-01T12:00:00

The problem is that the form's datefields don't load the date into them to edit. It appears to be some sort of formatting or binding issue. Any ideas? Thanks!

That all looks reasonable. I'd suggest setting up a fiddle to demonstrate the issue. Also note that `datetime` isn't a valid type. — Evan Trimboli, Sep 17 '13 at 11:13
Thanks for the quick reply Evan. Ive altered the model to read date instead of datetime and now neither the grid or form have the date in. — Daryl Leak, Sep 17 '13 at 11:24

score 2 · Accepted Answer · answered Sep 17 '13 at 11:28

In your model, replace type: 'datetime' by type: 'date', and remove the dateFormat, which is the expected data format (or configure it to match your response date format). The display format is the one you've configured in your grid, and that you should configure in your date field.

This way, the response data will be parsed to a Date object by the model, and this date object will be correctly interpreted both by the grid and the fields.

Extjs MVC : Dates showing in grid but loadRecord() cannot load them into form component when clicked

1 Answers1