PDA

View Full Version : Formatting .NET dates in ext?



darind
11 Sep 2008, 6:33 AM
I have a server returning some XML from a .NET server with datetimes. The dates appear in the grid with what looks like a normal format:



2008-09-11T08:29:54.9638002-05:00
But whenever I try to format them like



var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '...',
method: 'GET'
}),
reader: new Ext.data.XmlReader({
record: 'RFQTrade',
id: 'ServerID_Trade',
totalRecords: 'TotalNumResults'
}, [
'Contract', 'Price', 'Quantity', 'TradeTime'
])
});

var grid = new Ext.grid.GridPanel({
...
columns: [
{ header: 'TradeTime', width: 90, sortable: true, dataIndex: 'TradeTime',
renderer: Ext.util.Format.dateRenderer('Y') }
]
I get NaN displayed. I've also tried all the other obvious date format strings ("m/d/Y", "m/d/y", "m", "mm", "MM", etc) but none work.
I've searched the forums and found several people mention that ext uses a different datetime format than .NET but I can't find any examples of how. Anybody know the right way to format this date?

mabello
11 Sep 2008, 7:12 AM
It's bad as hell, but I'm using this in the meantime.


function dateRenderer(val){
var toRet = Ext.util.Format.substr(val, 0, 10);//01/01/2007 00:00:00 is the complete format
if(toRet == '01/01/1900')
return 'no date';
return toRet;
};



I used this as renderer for the column;
It's rubbish though.

EDIT: you probably just need to specify in the XmlReader config object the type:'date' for your field that represent a date.

evant
11 Sep 2008, 7:17 AM
Yep, you also need to specify the dateFormat too.

The easiest way is to send the date back as JSON, what I usually do is:



myDate: new Date(myDate)

mystix
11 Sep 2008, 7:28 AM
try this record definition instead:


reader: new Ext.data.XmlReader({
record: 'RFQTrade',
id: 'ServerID_Trade',
totalRecords: 'TotalNumResults'
}, [
'Contract', 'Price', 'Quantity',
{name: 'TradeTime', type: 'date', dateFormat: 'c'}
])
}

i specifically made the Ext Date object's c format specifier flexible enough to handle a variety of iso 8601 date formats in the previous minor release.

darind
11 Sep 2008, 7:42 AM
try this record definition instead:


reader: new Ext.data.XmlReader({
...
}, [
'Contract', 'Price', 'Quantity',
{name: 'TradeTime', type: 'date', dateFormat: 'c'}
])
}
i specifically made the Ext Date object's c format specifier flexible enough to handle a variety of iso 8601 date formats in the previous minor release.

Thanks. Unfortuantly no good though -- adding that line causes no data to show up in the grid (not just for this one column, there's no data for any column). Firebug reports no errors though. I'm still reading the tutorials of how to use firebug to debug further.
On the other hand, specifying capital 'C' as the date format does make the grid show data, although this particular column is still empty

darind
11 Sep 2008, 8:05 AM
Maybe I'm missing something. I wrote my own custom string parser and that returns the right value. I've verified via alert statements that the function is getting called and is returning the right value. But the new value isn't showing up in the grid. All the other columns show up fine but this field is blank. Any idea why?




var ds = new Ext.data.Store({
//Exactly as above -- I'm *not* specifying the "date" type on my field here.
});

function createDelegate(object, method)
{
return function() { method.apply(object, arguments); }
}

function formatMyDate(dateVal)
{
var formattedDate = Ext.util.Format.substr(dateVal, 11, 8);
alert(formattedDate);
return formattedDate;
}

var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: 'TradeTime', width: 90, sortable: true, dataIndex: 'TradeTime',
renderer: createDelegate(this, formatMyDate)
}
]

The formatMyDate function is getting called and shows alerts with the correct values. Yet the column in the grid is empty. Any ideas?

darind
11 Sep 2008, 8:26 AM
Yep, you also need to specify the dateFormat too.

The easiest way is to send the date back as JSON, what I usually do is:



myDate: new Date(myDate)


Unfortuantly, sending JSON from the server isn't an option (that's legacy code I can't change). Is there a way to do this in xml?

darind
11 Sep 2008, 9:21 AM
I finally just went with mabello's solution (I didn't even bother with a delegate, just stuck the function in as the renderer). Ugly and hacky, but it works.

mystix
11 Sep 2008, 9:29 AM
odd. post an xml snippet and your grid + store code.
i'll have a look at it in the morning.

mystix
11 Sep 2008, 6:20 PM
i modified the array-grid example using the suggestions i made in post #4 and it works as expected:

(modified array-grid.js from the official 2.2. download. modifications in red)


/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'2008-09-11T08:29:54.9638002-05:00'],
['Alcoa Inc',29.01,0.42,1.47,'2008-09-11T08:29:54.9638002-05:00'],
['Altria Group Inc',83.81,0.28,0.34,'2008-09-11T08:29:54.9638002-05:00'],
['American Express Company',52.55,0.01,0.02,'2008-09-11T08:29:54.9638002-05:00'],
['American International Group, Inc.',64.13,0.31,0.49,'2008-09-11T08:29:54.9638002-05:00'],
['AT&T Inc.',31.61,-0.48,-1.54,'2008-09-11T08:29:54.9638002-05:00'],
['Boeing Co.',75.43,0.53,0.71,'2008-09-11T08:29:54.9638002-05:00'],
['Caterpillar Inc.',67.27,0.92,1.39,'2008-09-11T08:29:54.9638002-05:00'],
['Citigroup, Inc.',49.37,0.02,0.04,'2008-09-11T08:29:54.9638002-05:00'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'2008-09-11T08:29:54.9638002-05:00'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'2008-09-11T08:29:54.9638002-05:00'],
['General Electric Company',34.14,-0.08,-0.23,'2008-09-11T08:29:54.9638002-05:00'],
['General Motors Corporation',30.27,1.09,3.74,'2008-09-11T08:29:54.9638002-05:00'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'2008-09-11T08:29:54.9638002-05:00'],
['Honeywell Intl Inc',38.77,0.05,0.13,'2008-09-11T08:29:54.9638002-05:00'],
['Intel Corporation',19.88,0.31,1.58,'2008-09-11T08:29:54.9638002-05:00'],
['International Business Machines',81.41,0.44,0.54,'2008-09-11T08:29:54.9638002-05:00'],
['Johnson & Johnson',64.72,0.06,0.09,'2008-09-11T08:29:54.9638002-05:00'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'2008-09-11T08:29:54.9638002-05:00'],
['McDonald\'s Corporation',36.76,0.86,2.40,'2008-09-11T08:29:54.9638002-05:00'],
['Merck & Co., Inc.',40.96,0.41,1.01,'2008-09-11T08:29:54.9638002-05:00'],
['Microsoft Corporation',25.84,0.14,0.54,'2008-09-11T08:29:54.9638002-05:00'],
['Pfizer Inc',27.96,0.4,1.45,'2008-09-11T08:29:54.9638002-05:00'],
['The Coca-Cola Company',45.07,0.26,0.58,'2008-09-11T08:29:54.9638002-05:00'],
['The Home Depot, Inc.',34.64,0.35,1.02,'2008-09-11T08:29:54.9638002-05:00'],
['The Procter & Gamble Company',61.91,0.01,0.02,'2008-09-11T08:29:54.9638002-05:00'],
['United Technologies Corporation',63.26,0.55,0.88,'2008-09-11T08:29:54.9638002-05:00'],
['Verizon Communications',35.57,0.39,1.11,'2008-09-11T08:29:54.9638002-05:00'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'2008-09-11T08:29:54.9638002-05:00']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'c'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});

post your grid code + xml if you still need help with this.