Date formatting in a grid column

[jinionnet]

Hi Guys,
I have a grid panel with a date column. I am facing issue when I specify the date format. I want to display the date format as 'd-M-Y' and when I specify this format in the grid column, getting a blank field only. I have used ajax proxy and json reader.

Here is the json output for the grid store data. I have removed some fields, specified column is enrolled_date and it is a MySQL timestamp value.




{"success":true,"total":"1","mothers":[{"id":"1","mother_id":"12344","first_name":"Rose","last_name":"M","gender":"M","enrolled_date":"2012-04-09 19:27:16","opt_out_date":"2012-04-12"}]}




Also here is the MODEL configuration for that specific column


.............
..............
{
dateFormat: 'Y-m-d',
mapping: 'enrolled_date',
name: 'enrolled_date',
type: 'date'
},
{
dateFormat: 'Y-m-d',
mapping: 'opt_out_date',
name: 'opt_out_date',
type: 'date'
}
............
............



And GRID column configuration.


............
............
{
xtype: 'datecolumn',
dataIndex: 'enrolled_date',
text: 'Enrolled Date',
format: 'd-M-Y'
},
{
xtype: 'datecolumn',
dataIndex: 'opt_out_date',
text: 'Opt Out Date',
format: 'd-M-Y'
}
............
............


And I am attaching the result screen herewith.

33908

You can see that the "Enrolled Date" not displayed but same time "Opt Out Date" displayed perfectly.

Please help me to resolve this issue.

Thanks,
jini

[scottmartin]

Please have a look at the following thread:
http://www.sencha.com/forum/showthread.php?194385-Problem-with-date-time-and-column-width

Example also available at bottom of page from user.

Regards,
Scott.

[jinionnet]

Hi Scot,
Thank you for the quick reply. But my scenario is different and I want to display the date format in Y-m-d format and my json date string is a timestamp value., ie Y-m-d h:m:s. So please tell me , is there a way to display the date in correct format without changing my json string data format. Because I want to use the same model for two different grid panels.

Thanks,
Jini

Please have a look at the following thread:
http://www.sencha.com/forum/showthread.php?194385-Problem-with-date-time-and-column-width

Example also available at bottom of page from user.

Regards,
Scott.

[scottmartin]

See if this helps:



function render_date(val) {
val = Ext.util.Format.date(val, 'Y-m-d');
return val;
}

Ext.application({
name: 'test',
launch: function () {
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'todate',
type: 'date'
}]
});

Ext.define('Companies', {
model: 'Company',
extend: 'Ext.data.Store'
});

var store = Ext.create('Companies');

store.loadRawData([{
"id": 1,
"todate": "2011-08-08T15:58"
}, {
"id": 2,
"todate": "2011-08-09T15:58"
}, {
"id": 3,
"todate": "2011-08-10T15:58"
}]);

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Id',
dataIndex: 'id'
}, {
header: 'To',
dataIndex: 'todate',
//xtype: 'datecolumn'
renderer: render_date
}],
columnLines: true,
width: 600,
height: 300,
title: 'GRID',
renderTo: Ext.getBody()
});
}
});​


Regards,
Scott.

[skirtle]

@jinionnet. Please post help requests in the Q&A forum. I'm going to move this thread.

You just need to change the dateFormat in your original example and it'll work fine:


dateFormat: 'Y-m-d H:i:s'

[jinionnet]

Hi Skirtle,
I need the date as 'd-M-Y' format in gridpanel where as my json string date format is 'Y-m-d H:i:s'. And I have changed the dateformat for MODEL as you suggested but still it is not working. Am getting null value.

Thanks,
Jineesh

[jinionnet]

Hi Scott,
It is working but it is not a datecolumn at all . It simply a column which accept string value.
Thanks to share this code snippet.,

Jini

[vietits]

The following code works well for me on Chrome, Ext 4.0.7


Ext.onReady(function(){
Ext.define('Model', {
extend: 'Ext.data.Model',
fields: [{
dateFormat: 'Y-m-d h:i:s',
mapping: 'enrolled_date',
name: 'enrolled_date',
type: 'date'
},{
dateFormat: 'Y-m-d',
mapping: 'opt_out_date',
name: 'opt_out_date',
type: 'date'
}]
});


var store = Ext.create('Ext.data.Store', {
model: 'Model',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'json',
root: 'mothers'
}
}
})


var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
columns: [{
xtype: 'datecolumn',
dataIndex: 'enrolled_date',
text: 'Enrolled Date',
format: 'd-M-Y'
},{
xtype: 'datecolumn',
dataIndex: 'opt_out_date',
text: 'Opt Out Date',
format: 'd-M-Y'
}]
});
});

data.json


{
"success":true,
"total":"1",
"mothers":[{
"id":"1",
"mother_id":"12344",
"first_name":"Rose",
"last_name":"M",
"gender":"M",
"enrolled_date":"2012-04-09 19:27:16",
"opt_out_date":"2012-04-12"
}]
}