PDA

View Full Version : Problem when sorting a date column in a grid



marxan
16 Mar 2011, 12:07 AM
Hello,

My grid contains a column with a date value inside. The first time I display it, it is well sorted has I've done it while creating my Json.

But when I use the sort of the grid, it's not sorted normally:

Here's a example: First time I see the date in this order:

February, 21 2011
February, 16 2011
January, 25 2011
January, 17 2011

This is correct.

Then I sorted it, and here's the result:

February, 16 2011
February, 21 2011
January, 17 2011
January, 25 2011


Here's my code: The column of the grid concerned is 'Date'


var comments = Ext.data.Record.create([
{name:'ComId', type:'string'},
{name:'User', type:'string'},
{name:'Date', type:'date'},
{name:'Comment', type:'string'},
{name:'Msg', type:'string'}
]);

CommentHistoryGrid = Ext.extend(Ext.grid.EditorGridPanel, {
border:false,
id: 'commentGrid',
initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
totalProperty: 'DATASET',
root: 'ROWS',
url: '../../components/JSONComments.cfc',
baseParams:{
method: 'qGetCommentsHistory',
returnFormat: 'JSON',
projectRef: project,
type: this.type,
messageType: this.messageType
},
fields:[
'ComId',
'User',
'Date',
'Comment',
'Msg'
]
}),

titleCollapse: false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
/**
* TOOL BAR BUTTON TO REMOVE A COMMENT
*/
tbar:[{
iconCls: 'remove-comment',
text: 'Remove Comment',
handler: function(){
selectedItem = this.getSelectionModel().getSelected();

if (selectedItem){
Ext.Msg.show({
title: 'Confirmation',
msg: 'Are you sure you want to delete this comment',
buttons: Ext.Msg.YESNO,
fn: function (btn){
if (btn == 'yes'){
var ajax1= Ext.Ajax.request({
url : '../Comment/removeComment.cfm' ,
method: 'GET',
success: function ( result, request ) {
location.href = "displayComment.cfm?project="+project+"&type="+type+"&typeAlert="+typeAlert+"&alertLevel="+alertLevel;
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'An error occured while removing this comment' +result.responseXML);
},
params: {comId: selectedItem.get('ComId')}
});

}
}
});

}
else{
//display error if try to remove without selecting a comment
Ext.Msg.show({
title: "Nothing selected",
msg: "No comment selected",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.CANCEL,
modal: false
});
}
},
scope:this
}

/**
* EDIT COMMENT NOT USED ANYMORE, SPECFICATIONS CHANGED
*/
/*,{
iconCls: 'edit-comment',
text: 'Edit comment',
handler: function(){
selectedItem = this.getSelectionModel().getSelected();

if (selectedItem){
Ext.Msg.prompt('Comment', 'You can modify the comment', function(btn, text){
if (btn == 'ok'){
var ajax2 = Ext.Ajax.request({
url : '../Comment/updateComment.cfm' ,
method: 'GET',
success: function ( result, request ) {
url = "displayComment.cfm?project="+project+"&type="+type+"&typeAlert="+typeAlert;
msgOKUrl('Success', 'Comment Updated', url);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'An error occured while updating this comment' +result.responseXML);
},
params: {comId: selectedItem.get('ComId'),
comment: text
}
});
}
},[],130,selectedItem.get('Comment'));
}
else{
//display error if try to edit without selecting a comment
Ext.Msg.show({
title: "Nothing selected",
msg: "No comment selected",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.CANCEL,
modal: false
});
}
},scope:this
}*/
],
autoExpandColumn: 'comments',
autoExpandMax : 800,
autoHeight: true,
//height: 240,
autoWidth: true,
// title: 'Comment History',
trackMouseOver: true,

/**
* Grid columns
*/
columns:
[
{
dataIndex: 'User',
width: 120
},
{
header: 'Date',
dataIndex: 'Date',
width: 130,
align: 'center',
sortable: true
},
{
header: 'Comments',
id: 'comments',
dataIndex: 'Comment',
sortable: true,
renderer: function(v, meta, records) {
meta.css += " white-space-normal";
return v;
}
},
{
header: 'Message description',
width: 350,
dataIndex: 'Msg',
renderer: function(v, meta, records) {
meta.css += " white-space-normal";
return v;
},
hidden: this.type == 'P'
}
]
//stripeRows: true
}; //eo config object

//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
CommentHistoryGrid.superclass.initComponent.apply(this, arguments);

}, //eo function initComponent

onRender:function() {
this.store.load();
CommentHistoryGrid.superclass.onRender.apply(this, arguments);
}
});

Ext.reg('CommentHistoryGrid',CommentHistoryGrid);

If anyone has an idea? Could it be a bug in extjs?

Thanks in advance,

Marxan

steffenk
16 Mar 2011, 12:42 AM
your field for date is type string, so it sort as string!
Define it as date type in your store.

marxan
16 Mar 2011, 1:05 AM
Thanks for your answer.

Indeed, I thought it was enough to define it as type date in the data.record.create...

I've modified the field date as follow:
{name: 'Date', type: 'string'},

But now it doesn't display the date anymore.

Do I need to define something in the Json data?

Maybe the problem could come from the format in my Json, when I retrieve it from the DB, I need to do a CAST in my query as the value in the DB is a timeStamp.

So I do :
SELECT COM_ID,
COM_USER,
CAST(COM_DATE AS DATE) COM_DATE,
COM_MSG,
MSG
FROM fjord.DWH_TB_PROJECT_COM
WHERE PROJECT_REF = '#projectRef#'

And it returns me this value in the Json: February, 21 2011 14:57:21. Maybe it won't interpret it has a date?

steffenk
16 Mar 2011, 3:38 AM
you don't need to cast, leave it as timestamp.

Use this in your field definition:

{name:'Date', type: 'date', dateFormat: 'timestamp'},

on render you can format the date like

return value.format("d-m-Y");

marxan
17 Mar 2011, 12:00 AM
Thanks Steffenk,

I understand that the problem is coming when my coldfusion structure is converted in Json.

The format is the following: February, 12 2010 12:20:20. But when I specify the type 'date' in my fields, it doesn't show the date... Is it possible to convert this format to another in extjs?

steffenk
17 Mar 2011, 12:37 AM
this should work without dateFormat, as this gives a result:

Date.parse('February, 12 2010 12:20:20')

marxan
17 Mar 2011, 1:11 AM
It's actually works as a string and I see the date but it can't be sorted properly. if I put type:'date'. The column is empty...

steffenk
17 Mar 2011, 1:23 AM
you should use a renderer for the column. Set type date and as renderer value.format('d/m/Y')

marxan
17 Mar 2011, 2:22 AM
value is not defined...

Here's the code, maybe you could see what I'm doing wrong...


var comments = Ext.data.Record.create([
{name:'ComId', type:'string'},
{name:'User', type:'string'},
{name:'Date', type:'date'},
{name:'Comment', type:'string'},
{name:'Msg', type:'string'}
]);

CommentHistoryGrid = Ext.extend(Ext.grid.GridPanel, {
border:false,
id: 'commentGrid',
initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
totalProperty: 'DATASET',
root: 'ROWS',
url: '../../components/JSONComments.cfc',
baseParams:{
method: 'qGetCommentsHistory',
returnFormat: 'JSON',
projectRef: project,
type: this.type,
messageType: this.messageType
},
fields:[
'ComId',
'User',
{name: 'Date', type:'date'},
'Comment',
'Msg'
]
}),

titleCollapse: false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
/**
* TOOL BAR BUTTON TO REMOVE A COMMENT
*/
tbar:[{
iconCls: 'remove-comment',
text: 'Remove Comment',
handler: function(){
selectedItem = this.getSelectionModel().getSelected();

if (selectedItem){
Ext.Msg.show({
title: 'Confirmation',
msg: 'Are you sure you want to delete this comment',
buttons: Ext.Msg.YESNO,
fn: function (btn){
if (btn == 'yes'){
var ajax1= Ext.Ajax.request({
url : '../Comment/removeComment.cfm' ,
method: 'GET',
success: function ( result, request ) {
location.href = "displayComment.cfm?project="+project+"&type="+type+"&typeAlert="+typeAlert+"&alertLevel="+alertLevel;
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'An error occured while removing this comment' +result.responseXML);
},
params: {comId: selectedItem.get('ComId')}
});

}
}
});

}
else{
//display error if try to remove without selecting a comment
Ext.Msg.show({
title: "Nothing selected",
msg: "No comment selected",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.CANCEL,
modal: false
});
}
},
scope:this
}

/**
* EDIT COMMENT NOT USED ANYMORE, SPECFICATIONS CHANGED
*/
/*,{
iconCls: 'edit-comment',
text: 'Edit comment',
handler: function(){
selectedItem = this.getSelectionModel().getSelected();

if (selectedItem){
Ext.Msg.prompt('Comment', 'You can modify the comment', function(btn, text){
if (btn == 'ok'){
var ajax2 = Ext.Ajax.request({
url : '../Comment/updateComment.cfm' ,
method: 'GET',
success: function ( result, request ) {
url = "displayComment.cfm?project="+project+"&type="+type+"&typeAlert="+typeAlert;
msgOKUrl('Success', 'Comment Updated', url);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'An error occured while updating this comment' +result.responseXML);
},
params: {comId: selectedItem.get('ComId'),
comment: text
}
});
}
},[],130,selectedItem.get('Comment'));
}
else{
//display error if try to edit without selecting a comment
Ext.Msg.show({
title: "Nothing selected",
msg: "No comment selected",
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.CANCEL,
modal: false
});
}
},scope:this
}*/
],
autoExpandColumn: 'comments',
autoExpandMax : 800,
autoHeight: true,
//height: 240,
autoWidth: true,
// title: 'Comment History',
trackMouseOver: true,

/**
* Grid columns
*/
columns:
[
{
dataIndex: 'User',
width: 120
},
{
header: 'Date',
dataIndex: 'Date',
type: 'date',
renderer: value.format('d/m/Y'),
// renderer: Ext.util.Format.dateRenderer('m/d/Y')},
width: 130,
align: 'center',
//renderer: Ext.util.Format.dateRenderer('m/d/Y h:i A')},
//dateFormat: 'm/d/Y h:i',
sortable: true
},
{
header: 'Comments',
id: 'comments',
dataIndex: 'Comment',
sortable: true,
renderer: function(v, meta, records) {
meta.css += " white-space-normal";
return v;
}
},
{
header: 'Message description',
width: 350,
dataIndex: 'Msg',
renderer: function(v, meta, records) {
meta.css += " white-space-normal";
return v;
},
hidden: this.type == 'P'
}
]
//stripeRows: true
}; //eo config object

//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
CommentHistoryGrid.superclass.initComponent.apply(this, arguments);

}, //eo function initComponent

onRender:function() {
this.store.load();
CommentHistoryGrid.superclass.onRender.apply(this, arguments);
}
});

Ext.reg('CommentHistoryGrid',CommentHistoryGrid);

steffenk
17 Mar 2011, 3:16 AM
try


renderer: function(value, metaData, record, rowIndex, colIndex, store) {
console.log(value, Ext.isDate(value) ? 'date' : 'not date');
return value.format('d/m/Y');
}

marxan
17 Mar 2011, 5:13 AM
value is null
is not a date.

It seems, that the format of the date is not recognized as a date but as a string.

steffenk
17 Mar 2011, 5:31 AM
hm - so what if you send the timestamp as i wrote before?
Or try a manual convert


{name: 'Date', convert: function(v) { return Date.parse(v); }}

marxan
17 Mar 2011, 6:07 AM
It's another problem(coldfusion) if I use the timeStamp. I receive a reference instead of the date.

I've try your line to convert it and now it's displayed 'NaN' ...

It's rather strange that nobody never did a sort on a date column in a grid. Don't you think?

Thanks anyway for your help.

steffenk
17 Mar 2011, 9:05 AM
no, it's not strange - it works for all of us, i never had problems with date values. There must be something wrong in your json that it can't be converted. Even with the given string it's easy to convert, try it in console.