PDA

View Full Version : Date formatting in a grid column



jinionnet
12 Apr 2012, 4:33 AM
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
12 Apr 2012, 6:01 AM
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
13 Apr 2012, 5:01 AM
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
13 Apr 2012, 8:15 AM
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
15 Apr 2012, 6:10 PM
@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
15 Apr 2012, 11:25 PM
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
15 Apr 2012, 11:27 PM
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
15 Apr 2012, 11:48 PM
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"
}]
}