PDA

View Full Version : HttpProxy CRUD create always called in stead of update



Windekewaai
9 Apr 2010, 5:10 AM
Hi everyone

I'm having trouble with JSON CRUD functions in my application.
I have a DataGrid set up with the Ext.ux.grid.RowEditor plugin.
The application is built in Spring MVC.

Populating the grid and creating records works as it should, but when I make changes with the RowEditor, the "create" function defined in the proxy api is called in stead of the "update" one.

I based myself on this article by Loiane Groner:
http://loianegroner.com/2010/03/extjs-and-spring-mvc-framework-crud-datagrid-example/

Here's my code:



<script type="text/javascript" src="../jsp/ext-3.2.0/js/ext-base.js"></script>
<script type="text/javascript" src="../jsp/ext-3.2.0/js/ext-all.js"></script>
<script type="text/javascript" src="../jsp/ext-3.2.0/js/RowEditor.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
messageProperty: 'message'
});

var personLanguageStore = new Ext.data.JsonStore({
id: 'personLanguages',
fields: [
{name: 'id'},
{name: 'personId', type: 'int'},
{name: 'language', type: 'string'},
{name: 'listening', type: 'int'},
{name: 'reading', type: 'int'},
{name: 'interaction', type: 'int'},
{name: 'speaking', type: 'int'},
{name: 'writing', type: 'int'}
],
root: 'data',
reader: reader,
writer: writer,
proxy: new Ext.data.HttpProxy({
api: {
read: '../person-language/read.html',
create: '../person-language/create.html',
update: '../person-language/update.html',
destroy: '../person-language/delete.html'
},
method: 'POST'
}),
autoLoad: true,
autoSave: true
});

var languageStore = new Ext.data.JsonStore({
id: 'languages',
proxy: new Ext.data.HttpProxy({
api: {
read: "../language/read.html"
},
method: 'POST'
}),
root: 'data',
reader: reader,
fields: [
{name: 'id'},
{name: 'description', type: 'string'}
],
autoLoad: true
});

var languageLevelStore = new Ext.data.JsonStore({
id: 'languageLevels',
proxy: new Ext.data.HttpProxy({
api: {
read: "../language-level/read.html"
},
method: 'POST'
}),
root: 'data',
reader: reader,
fields: [
{name: 'id'},
{name: 'description', type: 'string'},
{name: 'sortOrder', type: 'int'}
],
autoLoad: true
});

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

var grid = new Ext.grid.GridPanel({
renderTo: 'content',
store: personLanguageStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
header: 'Language',
width: 170,
sortable: true,
dataIndex: 'language',
editor: new Ext.form.ComboBox({
store: languageStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
header: 'Listening',
width: 100,
sortable: true,
dataIndex: 'listening',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
header: 'Reading',
width: 100,
sortable: true,
dataIndex: 'reading',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
header: 'Interaction',
width: 100,
sortable: true,
dataIndex: 'interaction',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
header: 'Production',
width: 100,
sortable: true,
dataIndex: 'speaking',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
header: 'Writing',
width: 100,
sortable: true,
dataIndex: 'writing',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
}
]
}),
plugins: [editor],
clicksToEdit: 'auto',
stripeRows: true,
title: 'Curriculum Vitae - Languages',
height: 500,
width: 674
});
});
</script>


Any idea what I'm doing wrong and how I can fix it?
Thanks in advance for any help.

Windekewaai
9 Apr 2010, 5:29 AM
The JSON returned by the read function, upon loading the grid:



{
"data":[
{
"id":1000047,
"reading":5,
"writing":5,
"personId":13326,
"interaction":5,
"listening":5,
"language":"NL",
"speaking":5
},{
"id":1000053,
"reading":5,
"writing":5,
"personId":13326,
"interaction":5,
"listening":3,
"language":"EN",
"speaking":5
},{
"id":1000054,
"reading":5,
"writing":5,
"personId":13326,
"interaction":5,
"listening":3,
"language":"FR",
"speaking":5
}
],
"total":3,
"success":true
}


I have not done a create before updating a record, so I doubt the script tries to re-create a record.

Windekewaai
9 Apr 2010, 6:34 AM
This error is now fixed, however I have no clue why :)

Basicly what I did is remove the id properties of the JsonStores.. :-?

Here's the working code:



<script type="text/javascript" src="../jsp/ext-3.2.0/js/ext-base.js"></script>
<script type="text/javascript" src="../jsp/ext-3.2.0/js/ext-all.js"></script>
<script type="text/javascript" src="../jsp/ext-3.2.0/js/RowEditor.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
});

var personLanguageStore = new Ext.data.JsonStore({
fields: [
{name: 'id'},
{name: 'personId', type: 'int'},
{name: 'language', type: 'string'},
{name: 'listening', type: 'int'},
{name: 'reading', type: 'int'},
{name: 'interaction', type: 'int'},
{name: 'speaking', type: 'int'},
{name: 'writing', type: 'int'}
],
root: 'data',
idProperty: 'id',
reader: reader,
writer: writer,
proxy: new Ext.data.HttpProxy({
api: {
read: '../person-language/read.html',
create: '../person-language/create.html',
update: '../person-language/update.html',
destroy: '../person-language/delete.html'
},
method: 'POST'
}),
autoLoad: true,
autoSave: true
});

var languageStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
api: {
read: "../language/read.html"
},
method: 'POST'
}),
reader: reader,
fields: [
{name: 'id'},
{name: 'description', type: 'string'}
],
root: 'data',
idProperty: 'id',
autoLoad: true
});

var languageLevelStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
api: {
read: "../language-level/read.html"
},
method: 'POST'
}),
reader: reader,
fields: [
{name: 'id'},
{name: 'description', type: 'string'},
{name: 'sortOrder', type: 'int'}
],
root: 'data',
idProperty: 'id',
autoLoad: true
});

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

var grid = new Ext.grid.GridPanel({
renderTo: 'content',
store: personLanguageStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
id: 'language',
header: 'Language',
width: 100,
sortable: true,
dataIndex: 'language',
editor: new Ext.form.ComboBox({
store: languageStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
id: 'listening',
header: 'Listening',
width: 100,
sortable: true,
dataIndex: 'listening',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
id: 'reading',
header: 'Reading',
width: 100,
sortable: true,
dataIndex: 'reading',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
id: 'interaction',
header: 'Interaction',
width: 100,
sortable: true,
dataIndex: 'interaction',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
id: 'production',
header: 'Production',
width: 100,
sortable: true,
dataIndex: 'speaking',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
},{
id: 'writing',
header: 'Writing',
width: 100,
sortable: true,
dataIndex: 'writing',
editor: new Ext.form.ComboBox({
store: languageLevelStore,
valueField: 'id',
displayField: 'description',
allowBlank: false
})
}
]
}),
autoExpandColumn: 'language',
tbar: [{
text: 'Delete record',
handler: function() {
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++) {
personLanguageStore.remove(r);
}
}
}],
plugins: [editor],
clicksToEdit: 'auto',
stripeRows: true,
title: 'Curriculum Vitae - Languages',
height: 500,
width: 674
});
});
</script>


Sorry for the trouble. Thanks for willing to assist ExtKD :D

Stormseeker
9 Apr 2010, 6:50 PM
This error is now fixed, however I have no clue why :)

Basicly what I did is remove the id properties of the JsonStores.. :-?

Here's the working code:

Sorry for the trouble. Thanks for willing to assist ExtKD :D

This is interesting because I was running into the same problem and I solved it exactly the opposite way. I found an older forum post that stated you need to have an idProperty on your Ext.data.JsonReader otherwise the grid will mark each record as phantom and when you do a store.save() it will call create instead of update.

Windekewaai
10 Apr 2010, 3:02 AM
That's true. As you can see in my code the property "idProperty" is still there. However, the property "id" is gone, which caused the problem.. :-/

murkrishna
26 Apr 2010, 2:24 AM
I am also facing the same problem and tried your changes but it not working.

can any one help me??



var modulesproxy = new Ext.data.HttpProxy({
api: {
read : indexurl+"admin/getallmoduleinfo",
create : indexurl+"admin/addmoduleinfo",
update: indexurl+"admin/updatemoduleinfo",
destroy: indexurl+"admin/deletemoduleinfo"
},
method: 'POST'
});

var modulesreader = new Ext.data.JsonReader ({
root: 'modulesinfo',
idProperty: 'id',
remoteSort: false,
fields: modulesinfo,
totalProperty: 'totalCount',
messageProperty: 'message',
successProperty: 'success'
});

var moduleswriter = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true // write all fields, not just those that changed
});

var modulesstore = new Ext.data.GroupingStore({
proxy: modulesproxy,
autoSave: true,
reader: modulesreader,
writer: moduleswriter,
sortInfo: {field: 'modulename', direction: 'ASC'},
groupField:'submoduleto'
});

Windekewaai
26 Apr 2010, 3:10 AM
The return values of your different controller functions are important. They can be as follows:

create: return the record created
read: return all needed records (obvious)
update: return all updated records (easiest is to return the output of your "read" function)
delete: return all records (easiest is to return the output of your "read" function)

murkrishna
26 Apr 2010, 3:18 AM
I got it fixed.

idProperty of JsonReader is 'id' whereas it should be one from the column list

thanks anyway.