[CLOSED]Formatting a date in a grid

[dlstrawn]

How do I format a date in a grid? Can't I do it in the header parm? See code below:

{header: '<b>ETA DC</b>', width:100, sortable:true, renderer:Ext.util.Format.date(p1,"p2"), dataIndex:'AF01ETAD'}

If the code above is valid, what would I use for the 1st date parm (p1), and for the second date parm ("p2")?

If this is not valid, how would I do it?



Here is the application of some info I found on the internet, but it doesn't work either:

Fields in the JSONStore:

fields: ["AF01CNO","AF01INO","AF01BL","AF01CARR","AF01SAIL","AF01CBPC","AF01ETAP","AF01RP", {name: 'AF01ETAD', type: 'date', dateFormat: 'Y/m/d'}, "AF01RNO"]


Column in the Grid:

{header: '<b>ETA DC</b>', width:100, sortable:true, renderer:Ext.util.Format.dateRenderer('m/d/Y'), dataIndex:'AF01ETAD'}

[richard.milone]

Post up your JSON response data from Firebug for this grid. I'd like to see what the data looks like before I give you instructions on the formatting.

[dlstrawn]

It is field AF01ETAD:

{"totalCount":26.00000,"autogrid":[{"AF01CNO":"MSKU4526410","AF01INO":"GB0296/10/C","AF01BL":"801807299","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100406,"AF01RNO":1861},{"AF01CNO":"APMU-4519991","AF01INO":"GB0297/10/C","AF01BL":"801807318","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100406,"AF01RNO":1862},{"AF01CNO":"HDMU4718127","AF01INO":"VN09120063","AF01BL":"HCM10S0321","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100415,"AF01RNO":1859},{"AF01CNO":"MSKU0963095","AF01INO":"GB0331/10/C","AF01BL":"801819108","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100416,"AF01RNO":1863},{"AF01CNO":"TGHU7223235","AF01INO":"PP2210PPP","AF01BL":"550621261","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100417,"AF01RNO":1884},{"AF01CNO":"MSKU-9423307","AF01INO":"22-10/PPP","AF01BL":"550621261","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100417,"AF01RNO":1885},{"AF01CNO":"MSKU4622899","AF01INO":"GB0375/10/C","AF01BL":"801830095","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100419,"AF01RNO":1873},{"AF01CNO":"FSCU-9404234","AF01INO":"NO32 - 10/PPP","AF01BL":"550831339","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100426,"AF01RNO":1888},{"AF01CNO":"PONU-1292073","AF01INO":"29-10/PPP","AF01BL":"","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100427,"AF01RNO":1876},{"AF01CNO":"MRKU0121984","AF01INO":"08E/PPP-ANV/10","AF01BL":"550728416","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100428,"AF01RNO":1875},{"AF01CNO":"PONU-7279000","AF01INO":"KKCL/SEBL/08110","AF01BL":"801841584","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1865},{"AF01CNO":"PONU-8036957","AF01INO":"KKCL/SEBL/08210","AF01BL":"801841587","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1866},{"AF01CNO":"MRKU-0387212","AF01INO":"KKCL/SEBL/08310","AF01BL":"801841592","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1867},{"AF01CNO":"FSCU-6991992","AF01INO":"KKCL/SEBL/08810","AF01BL":"801841600","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1868},{"AF01CNO":"TTNU-9255525","AF01INO":"KKCL/SEBL/08410","AF01BL":"801841590","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1869},{"AF01CNO":"MSKU-8343505","AF01INO":"KKCL/SEBL/08510","AF01BL":"801841593","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1870},{"AF01CNO":"MSKU-8219346","AF01INO":"KKCL/SEBL/08610","AF01BL":"801841596","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1871},{"AF01CNO":"MSKU-0730051","AF01INO":"KKCL/SEBL/08710","AF01BL":"801841598","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100507,"AF01RNO":1872},{"AF01CNO":"MSKU-9942658","AF01INO":"KKCL/SEBL/10210","AF01BL":"801863291","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1877},{"AF01CNO":"PONU-7364592","AF01INO":"KKCL/SEBL/10310","AF01BL":"801863292","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1878},{"AF01CNO":"MSKU-8324824","AF01INO":"KKCL/SEBL/10410","AF01BL":"801863293","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1879},{"AF01CNO":"PONU-8208640","AF01INO":"KKCL/SEBL/10510","AF01BL":"801863294","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1880},{"AF01CNO":"TTNU-52464519","AF01INO":"KKCL/SEBL/10610","AF01BL":"801863295","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1881},{"AF01CNO":"TRIU-5255373","AF01INO":"KKCL/SEBL/10710","AF01BL":"801863297","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1882},{"AF01CNO":"TTNU-55576114","AF01INO":"KKCL/SEBL/10810","AF01BL":"801863298","AF01CARR":"MAERSK LINE","AF01SAIL":0,"AF01CBPC":"1601","AF01ETAP":0,"AF01RP":"DL","AF01ETAD":20100511,"AF01RNO":1883}]}

[dlstrawn]

I used renderer:Ext.util.Format.dateRenderer('Ymd') like you suggested, but now I am getting NaNNaNNaN in the grid for the date field. Does that make any sense to you?

Full header line is:


{header: '<b>ETA DC</b>', width:100, sortable:true, renderer:Ext.util.Format.dateRenderer('Ymd'), dataIndex:'AF01ETAD'}

[dlstrawn]

OK. I got the date to format correctly with the following code:

jsonstore:
fields: [
{name:"AF01CNO"},
{name:"AF01INO"},
{name:"AF01BL"},
{name:"AF01CARR"},
{name:"AF01SAIL"},
{name:"AF01CBPC"},
{name:"AF01ETAP"},
{name:"AF01RP"},
{name:"AF01ETAD", type:'date', dateFormat:'Ymd'},
{name:"AF01RNO"}
]


grid:
columns: [
{header:'<b>Container</b>', width:125, sortable:true, dataIndex:'AF01CNO'},
{header:'<b>Invoice</b>', width:125, sortable:true, dataIndex:'AF01INO'},
{header:'<b>Bill of Lading</b>', width:125, sortable:true, dataIndex:'AF01BL'},
{header:'<b>Carrier</b>', width:125, sortable:true, dataIndex:'AF01CARR'},
{header:'<b>Sail Date</b>', width:100, sortable:true, dataIndex:'AF01SAIL'},
{header:'<b>To Port</b>', width:100, sortable:true, dataIndex:'AF01CBPC'},
{header:'<b>ETA Port</b>', width:100, sortable:true, dataIndex:'AF01ETAP'},
{header:'<b>To Port</b>', width: 100, sortable:true, dataIndex:'AF01RP'},
{header:'<b>ETA DC</b>', width:100, sortable:true, renderer:Ext.util.Format.dateRenderer('m/d/Y'), dataIndex:'AF01ETAD'}


The date now looks the way I want it to. Only problem now is, I can't edit a grid row. When I double click on a row to edit, I get the error message "Hmmm...could not retrieve the record". Any ideas?

[sean.lanktree]

What are the keys on your file? Can you verify that the post to get the record is passing the proper keys/values?

[dlstrawn]

I see that it is passing a formatted date to the server. So, I need to format the date for display, but "unformat" the date to update the server. What is the best way to do that?

[richard.milone]

Sorry I led you astray on my first answer about formatting the date. Upon looking at your post again and reading my reply I realized I gave you the wrong answer. I removed the post so as not to confuse anyone in the future who might read it.

To answer your question about sending the date back to the server I think we will need to see your code and the post data. If you can retrieve the posted data with a vvIn_date into an ISO date field you can use straight RPG code to arrange the date formatting to whatever you want before writing to the file. If you want me to give you more details post up the the RPG procedure that is pulling in your date and also post up the exact format of the date as it's being sent.

[dlstrawn]

Richard,

It is my belief that however you send data to the front-end is how it should be returned. All formatting/converting should be done on the front end without using server cycles. Correct me if I am wrong.

Therefore, since the data from the server is a 8,0 number showing ..."AF01ETAD":20100507..., I would like to send it back the same way. I have defined the date in the jsonstore as type:'date' (for display purposes) and it works fine. The problem is when I send it back. Currently, it is going back as ..."AF01ETAD":2010-05-07T00:00:00... This means using server cycles to parse the date back to an 8,0 number.

I am showing this same date in the form I am using for editing as 20100507(using daterenderer), so I think it can be done in the post string from the browser, but the way to do this eludes me(can't fugure out how to use daterenderer on the AF01ETAD: section [see below]). So, that is what I am asking. How do I format the post string in the front end code? See example below: (this comes from autocode generated code by the way)

var editWindow = new Ext.Window({
id: 'editWindow',
title: 'Edit Record',
modal: true,
iconCls: 'edit',
layout: 'fit',
width: 200,
height: 330,
closeAction: 'hide',
buttonAlign: 'left',
closable: false,
listeners:{
beforeshow:function(){
Ext.getBody().mask('<B>Retrieving record details...</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getRecord',
pgm: 'DPA0006R',
AF01ETAD: currentRecord.data.AF01ETAD,
AF01RNO: currentRecord.data.AF01RNO


I need some way the format the bold red line above to output a post string that looks like this: ..."AF01ETAD":20070507... or possibly ..."AF01ETAD":"20070507"... Either way would be acceptable. I posted this question on the ExtJS forum, but without much success. Thanks.

[richard.milone]

There's a lot of ways to format this on the front end but I would probably just use the JavaScript substr method to parse out the components of the date.

We're not normally handling this kind of date logic because most of the databases we deal with use ISO dates. But if you are going to be needing this in a lot of areas in your code you should externalize the logic into a global function. Something like:


var formatDate = function(inDate) {
return inDate.substr(0,4) + inDate.substr(5,2) + inDate.substr(8,2);
}
Then you can post the date just by wrapping the new function around it like:

AF01ETAD: formatDate(currentRecord.data.AF01ETAD)

[dlstrawn]

I tried this as follows:

Ext.onReady(function(){

//### GLOBAL SETTINGS/VARIABLES ################################################## #################
Ext.form.Field.prototype.msgTarget = 'under';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var formatDate = function(inDate) {
return inDate.substr(0,4) + inDate.substr(5,2) + inDate.substr(8,2);
}

Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
action: 'getRecord',
pgm: 'DPA0006R',
AF01ETAD: formatDate(currentRecord.data.AF01ETAD),
AF01RNO: currentRecord.data.AF01RNO
},

and I get this message in firebug:

inDate.substr is not a function

What am I doing wrong?

[richard.milone]

Hmmm, add this line to the top of your formatDate function and tell me what the alert box says when you run it:

alert(typeof inDate);

[dlstrawn]

It says "object"

[richard.milone]

Okay, now this:

alert(inDate.toString());

[dlstrawn]

It says: Fri May 07 2010 00:00:00 GMT-0400 (Eastern Daylight Time)

[richard.milone]

Ok, now this:

alert(Ext.util.Format.date(inDate, 'Ymd'));

[dlstrawn]

It says: 20100507

[richard.milone]

Ok good. You probably figured this out already but you can scrap the idea of a global formatDate function and just pass your date variables in the Ajax call like this:

AF01ETAD: Ext.util.Format.date(currentRecord.data.AF01ETAD, 'Ymd')

[dlstrawn]

Works great! Thanks for all your help.