PDA

View Full Version : Cannot save edited grid cell on the server using ColdFusion



anarchos78
5 Mar 2012, 11:32 AM
I am wrestling 2 weeks now to build an “editable” grid with Extjs and ColdFusion. It is needless to say that I have not any results! I tried this with “JSON” data (you can see the related post on: http://www.sencha.com/forum/showthread.php?183909-ColdFusion-and-Extjs4) and I am failing. So I gave a shot to “XML” data. Again a total failure! The funny part on this effort is that when I am posting static data to the “parse.cfm” without the ExtJs , everything is working as they supposed to. But when Ext posting data nothing happens (i have the same problem when I am using “JSON”).The point is that I what to purchase ExtJS4 but having these sort of problems make me skeptical. The sure thing is that I am new in ColdFusion and Ext as also. So I don’t know what to blame (CF or Ext – maybe both!). I am trying to find help on this, desperately.

Regards,
Tom
Greece (or what's left of it!)

Below is the code that I am using:

<------------------------------------------------------->
THE index.cfm
<------------------------------------------------------->

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<style type="text/css">
#holder {
margin: 50px auto auto 200px;
padding: 0px;
}
#members {
float: left;
clear: left;
}
</style>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>

<body>

<div id="holder">
<div id="members"></div>
</div>

</body>
</html>

<------------------------------------------------------->
THE app.js
<------------------------------------------------------->

Ext.onReady(function() {

/*var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
removePhantomsOnCancel: true,
autoCancel: false
});*/

Ext.define('memModel',{
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [{name:'ID'},
{name:'FIRSTNAME'},
{name:'LASTNAME'},
{name:'EMAIL'},
{name:'TIME',type:'date',dateFormat:'d-m-Y H:i'}
]
});

var membersStore = Ext.create('Ext.data.Store',{
model: 'memModel',
autoSync : true,
autoSave: true,
autoLoad: true,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
noCache : false,
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
api: {
read: 'http://localhost:8500/EXTJS4_XML/GRID1/members.cfm',
update: 'http://localhost:8500/EXTJS4_XML/GRID1/parse.cfm',
create: 'http://localhost:8500/EXTJS4_XML/GRID1/members.cfm'
},
reader: {
type: 'xml',
//idProperty:'ID',
root: 'ROWS',
record: 'member'
},
writer: {
type: 'xml',
root:"ROWS",
record: 'member'
}
})
});


var members = Ext.create('Ext.grid.Panel', {
id: 'members',
title:'Members',
store: membersStore,
selType: 'rowmodel',
columns: [{
id: 'id',
header : 'ID',
width: 35,
dataIndex: 'ID'
},{
header : 'Firstname',
flex : 1,
sortable : false,
dataIndex: 'FIRSTNAME',
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header : 'Lastname',
flex : 1,
sortable : false,
dataIndex: 'LASTNAME',
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header : 'Email',
flex : 2,
sortable : false,
dataIndex: 'EMAIL',
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
id : 'time',
header : 'Creation Date',
flex : 1,
dataIndex: 'TIME',
//renderer: Ext.util.Format.dateRenderer('d-m-Y'),
/*editor: {
xtype: 'datefield',
allowBlank: false
},*/
renderer: function(field) {
var formated = Ext.util.Format.date(field, 'd-m-Y g:i A');
return formated;
}
},{
xtype: 'actioncolumn',
sortable : false,
width: 80,
items: [{
id: 'edit',
icon: 'images/edit.png',
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//Ext.MessageBox.alert('Edit', rec.get('LASTNAME'));
}
},{
id: 'update',
icon: 'images/update.png',
tooltip: 'Update',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Update', rec.get('LASTNAME'));
}
},{
id: 'delete',
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
var sm = members.getSelectionModel();
rowEditing.cancelEdit();
membersStore.remove(sm.getSelection());
//Ext.MessageBox.confirm('Delete', 'Are you sure that you whant to delete' + ' ' + '\'' + rec.get('LASTNAME') + '\'');
sm.select(0);

}
}]
}],
width: 680,
//height: 200,
autoScroll: true,
//hidden : true,
renderTo: 'members',
plugins: [/*rowEditing*/
// Edit cell by cell
Ext.create('Ext.grid.plugin.CellEditing',{
clicksToEdit: 1
})

// Edit row by row
/*Ext.create('Ext.grid.plugin.RowEditing',{
clicksToEdit: 1
})*/
]
});
Ext.QuickTips.init();
});

<------------------------------------------------------->
THE members.cfm --------responsible for the data load---------
<------------------------------------------------------->

<cfsetting enablecfoutputonly="yes">
<cfsetting showdebugoutput="no">
<!--- Query the database and get all the records from the Images table --->
<cfquery name="selUsers" datasource="rental">
SELECT rental.members.id,
rental.members.firstname,
rental.members.lastname,
rental.members.email,
DATE_FORMAT(time,'%d-%m-%Y %H:%i:%s') AS time
FROM rental.members
</cfquery>
<!--- Send the headers --->
<cfheader name="Content-type" value="text/xml">
<cfheader name="Pragma" value="public">
<cfheader name="Cache-control" value="private">
<cfheader name="Expires" value="-1">
<cfsetting enablecfoutputonly="no"><?xml version="1.0" encoding="utf-8"?>
<ROWS>
<cfoutput query="selUsers">
<member>
<ID>#id#</ID>
<FIRSTNAME>#firstname#</FIRSTNAME>
<LASTNAME>#lastname#</LASTNAME>
<EMAIL>#email#</EMAIL>
<TIME>#time#</TIME>
</member>
</cfoutput>
</ROWS>

<------------------------------------------------------->
THE parse.cfm --------responsible for the unsuccessful data saving---------
<------------------------------------------------------->

<cfhttp url="http://localhost:8500/EXTJS4_XML/GRID1/index.cfm" method="GET" resolveurl="No" result="Urlfeed"></cfhttp>
<cfset myfeed = XmlParse(Urlfeed.FileContent)/>
<!--- <cffile action="read" file="C:\ColdFusion9\wwwroot\EXTJS4_XML\GRID1\member.xml" variable="myxml">
<cfset myfeed = XmlParse(myxml)>--->

<cfmail subject="XML" from="CF_Server" to="rigasathanasios78@hotmail.com" >
#myfeed#
</cfmail>

<!--- Get record nodes. --->
<cfset recordNodes = xmlSearch( myfeed, "/xmlData/member" ) />
<!---
Loop over the nodes so that we can insert each one into
the database.
--->
<cfloop
index="recordNode"
array="#recordNodes#">

<cfset valueNodes = xmlSearch( recordNode, "./*/text()" ) />

<cfset id = recordNode.xmlChildren[ 1 ].xmlText />
<cfset firstname = recordNode.xmlChildren[ 2 ].xmlText />
<cfset lastname = recordNode.xmlChildren[ 3 ].xmlText />
<cfset email = recordNode.xmlChildren[ 4 ].xmlText />
<cfset time = recordNode.xmlChildren[ 5 ].xmlText />

<!--- Update the values into the database. --->
<cfquery name="update" datasource="rental">
UPDATE rental.members
SET rental.members.id = <cfqueryparam value="#id#" cfsqltype="cf_sql_integer" />,
rental.members.firstname = <cfqueryparam value="#firstname#" cfsqltype="cf_sql_varchar" />,
rental.members.lastname = <cfqueryparam value="#lastname#" cfsqltype="cf_sql_varchar" />,
rental.members.email = <cfqueryparam value="#email#" cfsqltype="cf_sql_varchar" />,
time = <cfqueryparam value="#time#" cfsqltype="cf_sql_timestamp" />
WHERE rental.members.id = <cfqueryparam value="#id#" cfsqltype="cf_sql_integer" />
</cfquery>

</cfloop>

mitchellsimoens
5 Mar 2012, 11:40 AM
When your store fires off the sync request to the server, have you looked at the request to see what is being sent?

anarchos78
5 Mar 2012, 11:52 AM
It is says server error. This doesn't make sense. As i already said my ColdFusion can consume static "XML" data.

anarchos78
5 Mar 2012, 11:53 AM
And i don't understand why this is working in Extjs 3.0 version?

anarchos78
5 Mar 2012, 11:56 AM
In few words the error says that the posted data cannot be parsed!

murrah
19 Jul 2012, 2:01 PM
It is says server error. This doesn't make sense. As i already said my ColdFusion can consume static "XML" data.

"Server error" usually means some issue on the CF side related to CF page handling the data. One way I have found useful to test these situations with CF is to turn debugging on on the CF Server then set up a CF test page that sends the data to your api handlers directly - ie leave Ext out of the equation and just get the CF working independently of the the Ajax call. Use CFDUmp etc to track the data as the page handles the request. Once you are certain that the CF page is working as expected, try again from Ext.

I hope that helps. And, I have never used XML in these situations, only JSON, so I have no experience with what you are attempting.

Cheers,
Murray

anarchos78
19 Jul 2012, 9:19 PM
Thank you for your answer