Grid w/ Date field and CRUD store not working

[mikfig]

I have a setup that follows the Ext.data.DataWriter Example, with the exception that I didn't extend any classes. The create, update, read, destroy is all working perfectly fine with the grid. All the columns are working perfectly fine except for the date column. What happens is when the grid loads the data and is first rendered, all the columns are read in like they should be except for the date column. The date column all read NaN/NaN/NaN, and the data is coming in fine from the json source as can be seen from Firebug.

Anyways, the date field editor is working just fine as I can set a date, save the record, and it goes into the database just fine (I doublechecked in phpmyadmin). I have a feeling the issue might have to do with the format of the date data, which is saved/loaded like this: "2009-09-02T00:00:00"

I will attach a screenshot of what it looks like and below is my code.

	var proxy = new Ext.data.HttpProxy({
  	  api: {
    	    read : 'view',
      	  create : 'create',
        	update: 'update',
	        destroy: 'destroy'
  	  }
	});

	var reader = new Ext.data.JsonReader({
  	  totalProperty: 'total',
    	successProperty: 'success',
	    idProperty: 'id',
	    root: 'data'
	}, [
  	  {name: 'id'},
	    {name: 'game_date', xtype: 'datecolumn', format: 'm/d/Y', allowBlank: false},
	    {name: 'time', allowBlank: false},
	    {name: 'home_team', allowBlank: false},
	    {name: 'visiting_team', allowBlank: false},
	    {name: 'playing_field', allowBlank: false},			
	]);

	var writer = new Ext.data.JsonWriter({
	    encode: true,
	    writeAllFields: false
	});
			
	var store = new Ext.data.Store({
  	  id: 'user',
    	proxy: proxy,
	    reader: reader,
  	  writer: writer,
    	autoSave: false,
	    listeners: {
  	      write : function(store, action, result, res, rs) {
    	        Ext.Msg.alert("Notice", res.message);
      	  },
        	exception : function(proxy, type, action, options, res, arg) {
          	  if (type === 'remote') {
            	    Ext.Msg.show({
              	      title: 'REMOTE EXCEPTION',
                	    msg: res.message,
                  	  icon: Ext.MessageBox.ERROR,
                    	buttons: Ext.Msg.OK
	                });
  	          }
    	    }
    	}
	});

	store.load();
	var grid;
	    grid = new Ext.grid.EditorGridPanel({
        store: store,
        columns: [
            { id: 'game_date', header: "Date", width: 160, sortable: true, dataIndex: 'game_date', renderer: Ext.util.Format.dateRenderer('m/d/Y'), editor: new Ext.form.DateField({ format: 'm/d/Y', allowBlank: false })},
            {header: "Time", width: 75, sortable: true, dataIndex: 'time', editor: new Ext.form.TimeField({ allowBlank: false })},
            {header: "Home Team", width: 75, sortable: true, dataIndex: 'home_team', editor: new Ext.form.TextField({ allowBlank: false })},
            {header: "Visiting Team", width: 75, sortable: true, dataIndex: 'visiting_team', editor: new Ext.form.TextField({ allowBlank: false })},
            {header: "Playing Field", width: 85, sortable: true, dataIndex: 'playing_field', editor: new Ext.form.TextField({ allowBlank: false })}
        ],
	tbar: [
	{
            text: 'Add',
            iconCls: 'silk-add',
            handler: function(btn, ev) 
	    {
                var u = new store.recordType({
                    game_date : '',
                    time: '',
                    home_team : '',
		    visiting_team : '',
		    playing_field : ''
                });
								
                grid.stopEditing();
                store.insert(0, u);
                grid.startEditing(0, 1);
    				},
            scope: this
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: function(btn, ev) 
	    {
                var index = grid.getSelectionModel().getSelectedCell();
                if (!index)
                    return false;
                var rec = store.getAt(index[0]);
                store.remove(rec);
            },
            scope: this
        }, '-'],
	buttons: [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: function(btn, ev) 
	    {
               store.save();
            },
            scope: grid
        }],
	clicksToEdit: 2,
        stripeRows: true,
        autoExpandColumn: 'game_date',
        height:350,
        width:600,
        title:"Game Schedule"
    });
    grid.render('grid-example');

----------------
Now playing: Firewind - Inside
via FoxyTunes

----------------
Now playing: Firewind - Inside
via FoxyTunes

[mystix]

your JsonReader config for the game_date column is missing both the type (the Ext.data.Field's data type) and dateFormat (the expected format of the incoming date string) configs (see code in red):

var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data'
}, [{
        name: 'id'
    },
    {
        name: 'game_date',
        type: 'date',
        dateFormat: 'c' // incoming date string is in ISO8601 format

        //xtype: 'datecolumn',
        //format: 'm/d/Y',
        //allowBlank: false
    },
    {
        name: 'time'//,
        //allowBlank: false
    },
    {
        name: 'home_team'//,
        //allowBlank: false
    },
    {
        name: 'visiting_team'//,
        //allowBlank: false
    },
    {
        name: 'playing_field'//,
        //allowBlank: false
    }//,
]);

p.s. you have a trailing comma right before the closing square bracket.
p.s.s. i've not used the DataWriter example, but in 2.x the ColumnModel editor configs were specified in the ColumnModel, not the JsonReader, so i've commented those out just in case (see code in blue) -- feel free to add them back in if they're required by the DataWriter

[mikfig]

Thank you very much That solved my problem exactly, I had to use Firebug to step through the daterenderer code to find the formats of all the different date codes. For some reason, all the different format codes I found through google were all wrong.

Once again, thanks a ton

Mikfig

----------------
Now playing: Firewind - Where Do We Go From Here?
via FoxyTunes

[tounsi-hassen]

I attempt to insert into data base a date but when I use restfull writer ( using jersey ws, @PUT method ) the date value looks like this:
<xat2-server xmlns="http://xat2.etai.fr/monitoring">

<last-heart-beat>Tue Mar 01 2011 00:00:00 GMT+0100</last-heart-beat>


<server-name>MyServer</server-name>



</xat2-server>
but the value must look like :
date.PNG

Could somebody point me to what I have missed?
the code looks like this:

var Serveur = Ext.data.Record.create([
{
name : 'server-name',
type : 'string'
}, {
name : 'last-heart-beat',
type : 'date',
dateFormat: 'c'
}, {
name : 'monitoring-url',
type : 'string'
}, {
name : 'user-name',
type : 'string'
} , {
name : 'server-password',
type : 'string'
}]);

*********************
var grid = new Ext.grid.GridPanel({
store : store,
autoScroll:true,
border:true,
plugins : [ editor ],
columns : [ {
header : "Nom du Serveur",
width : 120,
sortable : true,
dataIndex : 'server-name',
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
header : "Last Heart Beat",
width : 180,
sortable : true,
dataIndex : 'last-heart-beat',
renderer: Ext.util.Format.dateRenderer('c'),
editor : {
id: 'last-heart-beat-date',
xtype : 'datefield',
allowBlank : false,
format: 'c'
}
}......



Thank you