PDA

View Full Version : RESTFull Proxy not sending Id with DELETE and PUT Verbs



bradlymathews
25 Sep 2013, 2:54 PM
I copied the RESTFull grid sample and tweaked the fields and URL to work with the REST API I just created.

But it is not passing the Id with the DELETE and PUT verbs. For example it is doing this:

localhost/ProductStore/api/Products?_dc=1380149154549 (http://localhost/ProductStore/api/Products?_dc=1380149154549)

when is should be doing this:
localhost/ProductStore/api/Products/3?_dc=1380149154549 (http://localhost/ProductStore/api/Products/3?_dc=1380149154549)

It is doing this correctly in the original sample, but not mine. So it seems I missed some required change but I can't figure out that what that is:



Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.Ajax.useDefaultXhrHeader = false;
// Can also be specified in the request options
Ext.Ajax.cors = true;


Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int',
useNull: true
}, 'Name', 'Category', 'Price'],
validations: [{
type: 'length',
field: 'Name',
min: 1
}, {
type: 'length',
field: 'Category',
min: 1
}, {
type: 'length',
field: 'Price',
min: 1
}]
});


Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Product',
proxy: {
type: 'rest',
url: 'http://localhost/ProductStore/api/Products',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;


if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Products',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'Id'
}, {
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'Name',
field: {
xtype: 'textfield'
}
}, {
header: 'Category',
width: 80,
sortable: true,
dataIndex: 'Category',
field: {
xtype: 'textfield'
}
}, {
text: 'Price',
width: 80,
sortable: true,
dataIndex: 'Price',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Product());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});


Thanks,
Brad

skirtle
25 Sep 2013, 4:00 PM
Are you trying to use the field 'Id' as the id? The default is 'id', all lower case.

Try setting the idProperty:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-idProperty

bradlymathews
25 Sep 2013, 8:14 PM
Thanks, that did indeed fix the DELETE action. I changed my key to ProductID just to make sure that was making a difference.

However, now POST is not working and PUT is still not working. Only this time neither POST nor PUT are even being submitted and I am not getting any errors to help me out.

Updated code:



Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.Ajax.useDefaultXhrHeader = false;
// Can also be specified in the request options
Ext.Ajax.cors = true;


Ext.define('Product', {
extend: 'Ext.data.Model',
idProperty: 'ProductID',
fields: [{
name: 'ProductID',
type: 'int',
useNull: true
}, 'name', 'category', 'price'],
validations: [{
type: 'length',
field: 'Name',
min: 1
}, {
type: 'length',
field: 'Category',
min: 1
}, {
type: 'length',
field: 'Price',
min: 1
}]
});


Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Product',
proxy: {
type: 'rest',
url: 'http://localhost/ProductStore/api/Products',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;


if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Products',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ProductID',
width: 40,
sortable: true,
dataIndex: 'ProductID'
}, {
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
}, {
header: 'Category',
width: 80,
sortable: true,
dataIndex: 'category',
field: {
xtype: 'textfield'
}
}, {
text: 'Price',
width: 80,
sortable: true,
dataIndex: 'price',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Product());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});


- Brad

bradlymathews
25 Sep 2013, 8:38 PM
Ok, that was a bit stupid. I forgot to change the case of the fields in the validations section.

So Name was indeed less than 1 in length (the proper field name as 'name',) so the form was not submitted.

- Brad