Getting ExtJS 4 Date Format To Behave Properly in Grid Panel with ASP.NET MVC3

Introduction and Problem

Converting Data Formats back and forth between browser and back end servers can be a little confusing. In my case, I have a simple Sencha ExtJS 4.0 form that the user types a date into. That date gets passed through an ajax request to the Microsoft asp.net controller, then that dates updates the SqlServer Database. When the Date is displayed on a Grid Panel, again, an ajax request is made that grabs the date from the controller, then formats it using the MS dateFormat from ExtJS and hopefully, the same date the user typed in gets re-displayed.

If you have a problem like this involving ASP.NET or Sencha Tools (ExtJS, SenchaTouch), more information about our consulting services are here.

So, let’s look at the details.

Posting the Date To the Server (View From JavaScript)

First, we need to define an ExtJS Model that has the date in it. That codes looks like this in my case.

Ext.define('EvMgr.model.SponsorListJobListing', {
    extend: 'Ext.data.Model',
    fields: [
        'Id',
        'SponsorListId',
        'JobName',
        'JobLocation',
        'JobURL',
        'JobBrief',
        'JobTagline',
        'JobButtonToolTip',
        { name: 'EnteredDate', type: 'date', dateFormat: 'MS' },
        'JobCompanyName',
        { name: 'StartRunDate', type: 'date', dateFormat: 'MS' },
        { name: 'EndRunDate', type: 'date', dateFormat: 'MS' },
        { name: 'HideListing', type: 'boolean' },
        'Notes'
    ],
    idProperty: 'Id',

    proxy: {
        type: 'ajax',
        api: {
            read: 'SponsorListJobListing/Get',
            update: 'SponsorListJobListing/Update',
            create: 'SponsorListJobListing/Create',
            destroy: 'SponsorListJobListing/Delete'
        },
        reader: {
            type: 'json',
            root: 'Data',
            successProperty: 'success'
        }
    },


    belongsTo: 'EvMgr.model.SponsorList'
});

Notice the StartRunDate field has dateFormat of ‘MS”.

Now, we have an ExtJS Window that we use to collect the data from the user. The code is as follows:

Ext.define('EvMgr.view.sponsorlist.ListJobListingsEdit', {
    extend: 'Ext.window.Window',
    alias: 'widget.sponsorlistjoblistingsedit',
    title: 'Edit Job Listing',
    layout: 'fit',
    width: 1000,
    autoShow: true,

    initComponent: function() {

        this.items = [
            {
                xtype: 'form',

                items: [
                    {
                        xtype: 'textfield',
                        name: 'JobName',
                        fieldLabel: 'JobName',
                        width: 850
                    },
                    {
                        xtype: 'textfield',
                        name: 'JobLocation',
                        fieldLabel: 'JobLocation',
                        width: 850
                    },
                     {
                         xtype: 'textfield',
                         name: 'JobURL',
                         fieldLabel: 'JobURL',
                         width: 850
                     },
                     {
                         xtype: 'textfield',
                         name: 'JobBrief',
                         fieldLabel: 'JobBrief',
                         width: 850
                     }, {
                         xtype: 'textfield',
                         name: 'JobTagline',
                         fieldLabel: 'JobTagline',
                         width: 850
                     },
                     {
                         xtype: 'textfield',
                         name: 'JobButtonToolTip',
                         fieldLabel: 'JobButtonToolTip',
                         width: 850
                     },
                     {
                         xtype: 'textfield',
                         name: 'JobCompanyName',
                         fieldLabel: 'JobCompanyName',
                         width: 850
                     },
                     {
                         xtype: 'textfield',  // checkbox makesthe value not come back for some reason
                         name: 'HideListing',
                         fieldLabel: 'HideListing',
                         width: 850
                     },
                     {
                         xtype: 'datefield',
                         name: 'StartRunDate',
                         fieldLabel: 'StartRunDate',
                         width: 850
                     },
                     {
                         xtype: 'datefield',
                         name: 'EndRunDate',
                         fieldLabel: 'EndRunDate',
                         width: 850
                     },
                    {
                        xtype: 'textfield',
                        name: 'SponsorListId',
                        fieldLabel: 'SponsorListId',
                        width: 850
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            }, {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

Notice we don’t have to mention the StartRunDate’s format because the model has that already.

When we run the app and press the “save” button, the actual post that goes back to the asp.net MVC3 controller looks like the following (notice the screen shot of the app first, then what happens when the Save button is pressed)

You can see that the date is passed back as Date(1313996400000). This is actually UTC time so we will need to make sure we check for that on the server. It’s always a good idea to store all dates on the server in UTC time anyhow.

Posting the Date To the Server (View From ASP.NET)

So let’s take a look at what is coming to the server. Remember that in the model, we defined what REST api is hit by a post from this model. In this case, it’s “update: 'SponsorListJobListing/Update',”. So, let’s debug into the C# (asp.net) side and see what is actually coming in. Here is what we see:

Notice that the date comes in very simply as midnight on 8/22/2011 (the date we put in). The tricky part is we need to store this date as UTC so that when we end it back, it can get converted back to local. To do this, in our repository class, we have code to convert to UTC as follows:

Your repository will look different, but this is a good example. Now, notice the StartRunDate will be 8/22/2011 at 7AM.

I’m over simplifying a little because it’s calculating UTC based on the Servers time zone, not the browsers. It would be better to send the timezone of the browser also and then calculate UTC correctly in JavaScript, but I just want to give you the idea here. In my case, I’m always running this app from California and my server is always inCalifornia so at least things stay consistent. I do realize I’m simplifying and you need to make sure you think this through.

Now, when I query the server for the returned data using the same ExtJS data model, the data comes down as follows. In ASP.NET it looks like this:

Which is actually different than what was pushed up. It seems though that when ExtJS displays this, it converts it to local time.

Our browser Grid shows it like this (as we would expect)

Hope this helps!