PDA

View Full Version : <SOLVED> Parsing Arraydata into DateField



wvmaaren
10 Jul 2009, 12:39 AM
Hey,

<Problem Solved!>
Well I figured it out. The parsing I did from my backend was not in the correct format and the mapping: 'begindatum' property wasn;t working for me!
</Problem Solved>

Finally I gor my Grid working but this is my last issue... I've been looking around on the forum, but haven't got my solution yet.

I have a RowEditorGrid in my webapp which gets it's data through Ajax (Still working with a arraystore, the backend parses an arraylist with the values). Everything fills correctly, except the DateFields. they still have a "" value.

When I edit the rows, and use the build in datepicker it sends a correct date value to my backend, so updrating and inserts are doing well.. only filling the grid won't....

This is how an arraylist I parsed looks like:


[['Test project 1',1,'29-6-2009','29-8-2009',1],['Test project 2',1,'9-6-2009','29-9-2009',3]]
here's my code.



Ext.onReady(function(){
Ext.QuickTips.init();

var myData = [];

var myProject = [
[1, 'Open'],
[2, 'Gesloten']
];

Uren = Ext.data.Record.create([
{name: 'projectnaam', type: 'string'},
{name: 'projectstatus'},
{name: 'begindatum', mapping: 'begindatum', type: 'date', dateFormat: 'd-m-Y'},
{name: 'einddatum', mapping: 'einddatum', type: 'date', dateFormat: 'd-m-Y'},
{name: 'projectid', type: 'int'}
]);

store = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({
fields: [
{name: 'projectnaam', type: 'string'},
{name: 'projectstatus'},
{name: 'begindatum', mapping: 'begindatum', type: 'date', dateFormat: 'd-m-Y'},
{name: 'einddatum', mapping: 'einddatum', type: 'date', dateFormat: 'd-m-Y'},
{name: 'projectid', type: 'int'}
]}),
data: myData
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Opslaan'
});

Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}

var comboProject = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
store : new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
]
}),
valueField : 'myId',
displayField : 'displayText'
});

gridDecl = new Ext.grid.GridPanel({
store: store,
width: '100%',
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'projectnaam',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Uren toevoegen',
handler: function(){
var e = new Uren({
projectnaam: 'project',
projectstatus: '1',
begindatum: '01-01-2006',
einddatum: '01-01-2009',
});
editor.stopEditing();
store.insert(0, e);
gridDecl.getView().refresh();
gridDecl.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '',
disabled: true,
handler: function(){
editor.stopEditing();
var s = gridDecl.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'projectnaam',
header: 'Projectnaam',
dataIndex: 'projectnaam',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: 'Projectstatus',
dataIndex: 'projectstatus',
width: 100,
editor: comboProject, // specify reference to combo instance
renderer: Ext.util.Format.comboRenderer(comboProject)
},{
xtype: 'datecolumn',
header: 'Begindatum',
dataIndex: 'begindatum',
format: 'd-m-Y',
width: 100,
sortable: true,
//groupRenderer: Ext.util.Format.dateRenderer('d-m-Y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01-01-2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('d-m-Y')
}
},{
xtype: 'datecolumn',
header: 'Einddatum',
dataIndex: 'einddatum',
format: 'd-m-Y',
width: 100,
sortable: true,
//groupRenderer: Ext.util.Format.dateRenderer('d-m-Y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01-01-2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('d-m-Y')
}
},{
header: 'ProjectID',
readOnly: true,
dataIndex: 'projectid',
width: 50,
hidden: true
}]
});

var WindowHeight = 0;
if( typeof( window.innerHeight ) == 'number' )
{
//Non-IE
WindowHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientHeight) )
{
//IE 6+ in 'standards compliant mode'
WindowHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientHeight ) )
{
//IE 4 compatible
WindowHeight = document.body.clientHeight;
}
var urenHeight = WindowHeight - 120;

var layout = new Ext.Panel({
title: 'Posad | Prjectregistratie',
layout: 'border',
layoutConfig: {
columns: 1
},
width:'100%',
height: urenHeight,
items: [gridDecl],
renderTo: 'uren'
});
layout.render(Ext.getBody());

gridDecl.getSelectionModel().on('selectionchange', function(sm){
gridDecl.removeBtn.setDisabled(sm.getCount() < 1);
});

editor.on('afteredit', gridupdate);
comboProject.store.loadData(myProject);
gridrequest();

});
</script>
<script type="text/javascript">
function gridrequest()
{
// var userID = 2;
// var week = 30;
// var year = 2009;

ajaxFunction("/ControllersAjax/jobs/GridData", "userID=test", "gridreturn", true);
}

function gridupdate(oGrid_event)
{
var projectnaam = "pn=" + oGrid_event.record.data.projectnaam;
var projectstatus = "&ps=" + oGrid_event.record.data.projectstatus;
var begindatum = "&bg=" + oGrid_event.record.data.begindatum.format('d-m-Y');
var einddatum = "&ed=" + oGrid_event.record.data.einddatum.format('d-m-Y');
if (oGrid_event.record.data.projectid != null)
{
var projectid = "&id=" + oGrid_event.record.data.projectid;
var params = projectnaam + projectstatus + begindatum + einddatum + projectid;
ajaxFunction("/ControllersAjax/jobs/GridUpdate", params, "gridreturn", true);
}
else
{
var params = projectnaam + projectstatus + begindatum + einddatum;
ajaxFunction("/ControllersAjax/jobs/GridInsert", params, "gridinsertreturn", true);
}
}

function gridinsert()
{
ajaxFunction("/ControllersAjax/jobs/GridInsert", params ,"gridinsertreturn", true);
}

function gridinsertreturn()
{
gridrequest();
}

function gridreturn(data)
{
myData = eval(data);
store.loadData(myData)
gridDecl.reload;

//alert(test);
//document.getElementById('test').innerHTML = test;
}

</script>

wvmaaren
10 Jul 2009, 3:25 AM
I've been trying loads and I guess the problem is the DateTime Format I'm using isn't compatible with the Date Format ExtJS is using.

I tried parse the value in a ISO8601 way and use a dateFormat = 'c'. but this wouldn't work either.

I hope anyone can help!