PDA

View Full Version : Date Renderer giving different date from the input date



gokulpotluri
26 Jun 2013, 10:30 PM
Hi,

I am using grid in extjs 3.4 and there is a column with date in the grid.
now i want to change the date format before displaying it in the grid.
For this i am using following two ways of code

asm_profile_date_format = 'F j, Y'




column = new Ext.grid.Column
(
{
header : map['label'],
sortable : true,
dataIndex : map['name'],
renderer : Ext.util.Format.dateRenderer(asm_profile_date_format)
}
)

and


renderer : function(value)
{
if(value == null)
return ' '
else
{
return value.format(asm_profile_date_format);
}
}


Here the value/input date i am getting is 19/6/2013, but the date after the renderer i am getting is jul 6, 2014.

Farish
26 Jun 2013, 11:15 PM
Have you defined dateFormat in the date field in your store's model? It might be interpreting the date wrongly. e.g. it might think that the input date is in month/day/year format rather than day/month/year.

gokulpotluri
27 Jun 2013, 12:20 AM
Yeah i gave dateFormat and this is the format which i used in the model

'd/m/Y'

Farish
27 Jun 2013, 12:35 AM
I cant say about ExtJS 3.x. May be this is a problem in that version or it works some other way. Here is a sample for ExtJS 4.x and it works fine (code taken from API docs examples and modified):


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', {name: 'timestamp', type: 'date', dateFormat: 'd/m/Y'}],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224", "timestamp":"01/10/2013"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234", "timestamp":"12/01/2013"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244", "timestamp":"13/11/2013"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254", "timestamp":"21/04/2013"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Time Stamp', dataIndex: 'timestamp', renderer : Ext.util.Format.dateRenderer('F j, Y'), flex:1}
],
height: 200,
width: 600,
renderTo: Ext.getBody()
});

Compare it with your configurations and see if there is a difference. Also, you should move this thread to Ext JS 3.x Forums. you might get better responses there.

What is happening in your case is that the input date or the dateFormat of the model is not setup correctly causing the store to read dates in m/d/Y format rather than d/m/Y. you can see that in your case, it has used the modulo 12 for the first value (this gives 19-12 = 7 = July) and incremented the year by 1 because of this and used the month value as date.

gokulpotluri
27 Jun 2013, 12:40 AM
In column model for timestamp column lastly you used flex.
What is it used for.?

Farish
27 Jun 2013, 12:51 AM
that is just for layout and has nothing to do with data and rendering. the important parts for you to note are the renderer in the grid column with dataIndex: "timestamp" and the timestamp field in the store's fields and the values filled in for this field in the data array in store.

gokulpotluri
27 Jun 2013, 12:57 AM
yeah i know that. but i dont know the functionality of the flex and what it will do that.
So i just asked to know that.

And regarding the giving dateFormat in the model we are not using the model.
Here in our requirement we are using the record and an object to give the config's to that record as given below:


if (this.fieldConfig != null) {
for (var i = 0; i < this.fieldConfig.length; i++) {
field = this.fieldConfig[i];
if (field.fieldType != null && field.fieldType.length > 0)
{
fieldMap = new Object();
fieldMap['name'] = field.fieldName;
fieldMap['mapping'] = field.fieldName + '.value';
fieldMap['label'] = field.label;
fieldMap['ftype'] = field.fieldType;
if (field.fieldType == Constants.CustomFields.DATE) {
fieldMap['ftype'] = 'date';
fieldMap['dateFormat'] = 'd/m/Y';
}
this.recordArray.push(fieldMap);
allArray.push(fieldMap);
}
}
}
this.gridRecord = Ext.data.Record.create(allArray);


This is how we are passing the dateFormat to the record for the date field.

Farish
27 Jun 2013, 1:02 AM
flex causes the width of the columns to adjust automatically according to the available space rather than having a fixed width. If I say flex: 1 for 1 column and width: 100 for the others, then the other columns will have a fixed width of 100 and the column with flex will adjust its width according to the remaining available width. If I use flex: 1 and flex: 2 for 2 columns, then the width of the 2nd column will be twice the width of the first.

gokulpotluri
27 Jun 2013, 1:10 AM
Thanks for your explanation.

And regarding the giving dateFormat in the model we are not using the model.
Here in our requirement we are using the record and an object to give the config's to that record as given below:


if (this.fieldConfig != null) {
for (var i = 0; i < this.fieldConfig.length; i++) {
field = this.fieldConfig[i];
if (field.fieldType != null && field.fieldType.length > 0)
{
fieldMap = new Object();
fieldMap['name'] = field.fieldName;
fieldMap['mapping'] = field.fieldName + '.value';
fieldMap['label'] = field.label;
fieldMap['ftype'] = field.fieldType;
if (field.fieldType == Constants.CustomFields.DATE) {
fieldMap['ftype'] = 'date';
fieldMap['dateFormat'] = 'd/m/Y';
}
this.recordArray.push(fieldMap);
allArray.push(fieldMap);
}
}
}
this.gridRecord = Ext.data.Record.create(allArray);


This is how we are passing the dateFormat to the record for the date field.

Farish
27 Jun 2013, 1:29 AM
searching for ftype in ExtJS 4.x documentation returns nothing. I dont know how to fix this issue. I would again recommend that you post in ExtJS 3.x forums with code.

gokulpotluri
27 Jun 2013, 1:39 AM
ftype is our own thing. you wont find it in the extjs.
And i also posted it in the 3.x community also, there no one is giving reply.
Cant we use our own things in the object like that 'ftype'.?

Farish
27 Jun 2013, 2:10 AM
since you are creating your own JS object, you can use any properties you like but for ExtJS, you should have at least those properties which are required. try adding a type: 'date' property.

gokulpotluri
27 Jun 2013, 5:27 AM
Thanks a lot for your suggestion.

Before formatting it we first parsed the date to our required format using parseDate(date, format) and then we formatted that parsed date. now it is giving correct output which we want.