Ext JS 4: Returning .NET nullable DateTime? from web method as JSON object to ExtJS not displaying in Ext.grid.Panel

Question

I'm returning a list of .NET serialized objects (Project objects) from a JSON web service via an Ext JS JSON proxy. I'm not able to get my Ext.grid.Panel to properly display my date formatted fields. Why would that be? Search for "this one" below. All other fields are showing properly in my Ext grid. And when I save the date from my calendar control, it stores the date properly in the database. To rule out other issues, I've hard coded the date for you in my object.

Serialized class:

    [Serializable]
    public class Project
    {
        public string project_id;
        public string project_number;
        public string project_name;
        public string description;
        public DateTime? date_start;
    }

Web method:

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false, XmlSerializeString = false)]
    public List<Project> GetProjects(string myTest, string bar)
    {
        Database db = DatabaseFactory.CreateDatabase("HIMC-DEV");

        DbCommand cmd = db.GetStoredProcCommand("project_get_list");
        db.AddInParameter(cmd, "@user_id", DbType.String, "");

        DataSet ds = db.ExecuteDataSet(cmd);
        DataTable dt = ds.Tables[0];
        List<Project> projectList = new List<Project>();
        foreach (DataRow row in dt.Rows)
        {
            Project p = new Project();
            p.project_id = row[0].ToString();
            p.project_number = row[1].ToString();
            p.project_name = row[2].ToString();
            p.description = row[3].ToString();
            p.date_start = new DateTime(2012, 1, 12);  // <=== this one
            projectList.Add(p);
        }

        return projectList;
    }

Ext Model:

Ext.define('Project', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'project_id' },
        { name: 'project_name' },
        { name: 'project_number' },
        { name: 'description' },
        { name: 'date_start', type: 'date' }
    ]
});

JSON proxy:

Ext.define('Ext.ux.AspWebAjaxProxy', {
    extend: 'Ext.data.proxy.Ajax',
    require: 'Ext.data',

    buildRequest: function (operation) {
        var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
        params = Ext.applyIf(params, this.getParams(params, operation));
        if (operation.id && !params.id) {
            params.id = operation.id;
        }

        params = Ext.JSON.encode(params);

        request = Ext.create('Ext.data.Request', {
            params: params,
            action: operation.action,
            records: operation.records,
            operation: operation,
            url: operation.url
        });
        request.url = this.buildUrl(request);
        operation.request = request;
        return request;
    }
});

Ext Window with embedded form:

    Ext.define('ProjectEdit', {
        extend: 'Ext.window.Window',

        alias: 'widget.projectedit',
        title: 'Edit Project',
        layout: 'fit',
        autoShow: true,
        closable : true,

        initComponent: function () {
            this.items = [
                {
                    xtype: 'form',
                    width: 650,
                    height: 300,
                    bodyPadding: 20,
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'project_id',
                            fieldLabel: 'Project ID'
                            //disabled: true
                        },
                        {
                            xtype: 'textfield',
                            name: 'project_number',
                            fieldLabel: 'Project Number'
                        },
                        {
                            xtype: 'textfield',
                            name: 'project_name',
                            fieldLabel: 'Project Name'
                        },
                        {
                            xtype: 'datefield',
                            format: 'm/d/Y',
                            allowBlank: true,
                            name: 'date_start',
                            fieldLabel: 'Start Date'
                        },
                        {
                            xtype: 'combo',
                            fieldLabel: 'Manager',
                            emptyText: 'select keyword',
                            store: keywordStore,
                            valueField: 'name',
                            displayField: 'name',
                            mode: 'remote',
                            autoSelect: false,
                            selectOnFocus: true,
                            shadow: true,
                            forceSelection: true,
                            triggerAction: 'all',  // not sure what this is?
                            hideTrigger: true,
                            //multiSelect:true,
                            typeAhead: true,
                            minChars: 1,
                            renderTo: document.body
                        },
                        {
                            xtype: 'htmleditor',
                            name: 'description',
                            fieldLabel: 'Description',
                            enableColors: false,
                            enableAlignments: false,
                            width: '100%'
                        }
                    ]

                }
            ];
...

Ext grid:

    Ext.define('ProjectGrid', {
        extend: 'Ext.grid.Panel',

        initComponent: function () {
            var me = this;

            Ext.applyIf(me, {
                store: store,
                columns: [
                    { text: 'Project ID', dataIndex: 'project_id', sortable: true },
                    { text: 'Project Number', dataIndex: 'project_number', sortable: true },
                    { text: 'Project Name', dataIndex: 'project_name', sortable: true, width: 300 },
                    { text: 'Start Date', dataIndex: 'date_start', sortable: true, width: 300, renderer: Ext.util.Format.dateRenderer('Y-m-d') },
                    { text: 'Description', dataIndex: 'description', sortable: true, width: 500 }
                ],
                listeners: {
                    //itemdblclick: this.editProject
                    itemdblclick: function(view, record, item, index, e) {
                        //var w = new ProjectEdit();
                        var w = Ext.widget('projectedit');
                        w.show();  // show the window
                        w.down('form').loadRecord(record);  // load the record in the form
                        w.callback = Ext.bind(this.editProject, this); // bind lets you set the scope of the callback (for the project that was double clicked)
                    }
                }
            });

            me.callParent(arguments);
        },

...

    });

JSON request image from Firebug NET tab (open in a new tab to make it larger):

Answer 1

The issue you experience seems to be connected with the date format for this date field.
By default ExtJS expects date to be sent in format that differs from one used by .Net.

Updating your model the following way should help:

{ name: 'date_start', type: 'date', dateFormat: 'MS' }

or

{ name: 'date_start', type: 'date', dateFormat: 'U' }

See ExtJS API for dateFormat and its possible values.