Working with dates and date formats in ExtJs

[Nils-Fredrik]

If you are struggelig with dates and date formats this might be worth reading: http://frontenddev.wordpress.com/2009/08/08/ext-date-demytified-and-iso-8601/

[steffenk]

hm - doesn't help. The only one you must read is this:
http://extjs.com/deploy/dev/docs/?class=Date

[mystix]

If you are struggelig with dates and date formats this might be worth reading: http://frontenddev.wordpress.com/2009/08/08/ext-date-demytified-and-iso-8601/

interesting blog post. :)


i've some questions / comments:


I started writing this post as a quite harsh criticism of ExtJs and their Date class. Now I only find it’s docs a bit uncomplete. I don’t think it should be necessary to read very much sourcecode to use a library like ExtJS. In other words, this blogpost should not be needed.

do you still think the Ext Date extensions are bad / lacking? if so, why?
which part(s) of the Date documentation are incomplete?




parseDate() is the ISO8601 helper.

it isn't just an ISO8601 helper. it's a general Date parsing method.






var iso_date = Date.parseDate("2008-01-11 22:00:00", "Y-m-d H:i:s");
// ... ... ...


it's even simpler than that actually:


var iso_date = Date.parseDate("2008-01-11 22:00:00", "c");
// ... ... ...



the example code you posted could also be simplified to
(note: modifications are in red)


var grid = new Ext.grid.GridPanel({
renderTo: 'container',

// setup the Store
store: {
xtype: 'arraystore',
fields: [
'firstname',
'lastname',

// Notes:
// - the type:'date' config tells the Store that the 'dob' Field's value
// will be stored as a javascript Date object in the Record
// - the dateFormat:'Y-m-d' config tells the Store that date string data
// for the 'dob' Field will be in Y-m-d format
{ name: 'dob', type: 'date', dateFormat: 'Y-m-d' }
],

// Some example data
data: [
['John', 'Doe', '1980-05-06'],
['Jane', 'Doe', '1977-06-02'],
['Joan', 'Doe', '1945-01-02']
]
},

// Setup the column headers for the grid
columns: [
{ header: 'Firstname', dataIndex: 'firstname' },
{ header: 'Lastname', dataIndex: 'lastname' },
{
header: 'Date of birth',
dataIndex: 'dob',

// Returns a date rendering function that can be reused
// to apply the 'd.m.Y' date format multiple times efficiently
renderer: Ext.util.Format.dateRenderer('d.m.Y')
}
]
});

which removes the need for an explicit ArrayReader declaration by simply using Ext 3.0's ArrayStore (http://extjs.com/docs/?class=Ext.data.ArrayStore) (or SimpleStore (http://extjs.com/deploy/ext-2.3.0/docs/?class=Ext.data.SimpleStore) in Ext 2.3.0), inlines the example data in the ArrayStore declaration, and uses the Ext.util.Format.dateRenderer (http://extjs.com/docs/?class=Ext.util.Format&member=dateRenderer) to generate reusable date rendering functions.

[Nils-Fredrik]

Thanks for your reply mystix!

The point with the post was primary to show the examples as simple as possible, probably primary done for my own sake. I have been working quite a lot with data for grids generated serverside. So, after getting the point with the Date extension I find the docs ok when considering the Date isolated from it's normal use. But, examples (in the docs, not in the examples) showing different contexts it is used would be great.

Your simpler example is good. But, I don't find it suitable for an example in the documentation. Define the variables and objects, and put the variables as parameters to the config. I don't know the English word for this, but the "nesting" setup of grids and other components can be quite confusing. I also find debugging a bit harder when "nesting" config objects. This is just my opinion, and I rekon some of the more arrogant guys in this forum find this stupid.

I do plan to post a follow up on the article with the serverside generating the data and some more stuff.

Further on I plan to wrte posts about all the stuff I am working on from week to week. Have just done an interesting one with Charts that will be out as soon.

Btw (and a bit off-topic), have you read the BBC post? http://aboutfrontend.com/2009/08/bbcs-hidden-javascript-framekiller/

[mystix]

So, after getting the point with the Date extension I find the docs ok when considering the Date isolated from it's normal use. But, examples (in the docs, not in the examples) showing different contexts it is used would be great.

doable, but are there specific examples of stuff you'd like to see in mind?



Your simpler example is good. But, I don't find it suitable for an example in the documentation. Define the variables and objects, and put the variables as parameters to the config. I don't know the English word for this,

"JSON" - javascript object notation. nothing more to it. :)



but the "nesting" setup of grids and other components can be quite confusing. I also find debugging a bit harder when "nesting" config objects. This is just my opinion, and I rekon some of the more arrogant guys in this forum find this stupid.

then i must be real stupid then, 'cos that's how i wrote it when i first began using Ext. ;)
i switched to writing most stuff in JSON 'cos i find it's neater -- everything's consolidated in one place, and i get the full "picture" at a glance.



I do plan to post a follow up on the article with the serverside generating the data and some more stuff.

Further on I plan to wrte posts about all the stuff I am working on from week to week. Have just done an interesting one with Charts that will be out as soon.

looking forward to future posts!



Btw (and a bit off-topic), have you read the BBC post? http://aboutfrontend.com/2009/08/bbcs-hidden-javascript-framekiller/
yes i did, on the same day i read your Date post.
that really was pretty amusing. :))