PDA

View Full Version : Rest grid calls 'id' problem



Silfide
16 Jul 2018, 3:36 AM
Hello,
I use ExtReact and I'm new in sencha.
I create my first application that call some CRUDS from my Django API.
I have some problems with creating new records.




I extended the proxy.REST like this:



Ext.define('Infojuice.proxy.DjangoProxy', {
extend: 'Ext.data.proxy.Rest',
alias: 'proxy.djangoproxy',


buildUrl: function(request) {
console.log(request.config)
if (request.config.action === "update" || request.config.action === "destroy") {
var url = Ext.data.proxy.Rest.prototype.buildUrl.apply(this, arguments);
var newUrl = url.replace('?', '/?')
return newUrl;
}
return Ext.data.proxy.Rest.prototype.buildUrl.apply(this, arguments);
}
});





I use it in my model like this:


export default Ext.define('InvoicePeriod', {
extend: 'Ext.data.Model',
idProperty : "id",
fields: [
{
name: 'id',
infojuice_type: 'number',
dimension: 1,
editable: true,
disabled: true,
}, {
name: 'model_id',
infojuice_type: 'number',
dimension: 1,
editable: false,
disabled: true,
}, {
name: 'name',
infojuice_type: 'string',
required: true,
editable: true,
dimension: 4,
title: 'Nome'
}, {
name: 'days_interval',
infojuice_type: 'number',
required: true,
editable: true,
dimension: 1,
title: 'Frequenza (giorni)'
}
],
proxy: {
type: 'djangoproxy',
url: API_URL,
headers: {
'Authorization': `token ${API_TOKEN}`,
'Content-Type': 'application/json',
},
reader: {
type: 'json',
rootProperty: function(data){
// Extract child nodes from the items or children property in the dataset
return data.results
}
},
writer: {
type: "json",
writeAllFields: true
}
}
})




Finally, I use this model and this proxy to create a store and use it to show a Grid:



_createTableStore = (model) => {
// Create instance of Ext.data.Store
return Ext.create('Ext.data.Store', {
autoLoad: true,
model,
proxy: model.proxy,
listeners: {


update: function(store, records, operation, modifiedFieldNames, details, eOpts){
if (operation === "commit") {
// TODO: Put id returned by api
console.log(eOpts)
console.log(details)
return false;
}
var record = Ext.create(store.model.$className, records.data);
record.save(
{
failure: function(record, operation) {
// do something if the save failed
Ext.Msg.alert(
'Errore',
'Si è verificato un errore durante la richiesta. Messaggio dal server:</br>' +
operation.error.response.responseText
);
return false;
},
success: function(record, operation) {
// do something if the save succeeded
Ext.toast('Richiesta completata con successo');
},
callback: function(record, operation, success) {
// do something whether the save succeeded or failed
}
}
); //POST /users
},
remove: function(store, records, index, isMove, eOpts){
records.forEach(record => {
record.data.id = null;
record.erase(); //DELETE /users
});
},
add: function(store, records, index, modifiedFieldNames){
console.log("**** Lancio add");
console.log(store, records, index, modifiedFieldNames);
records.forEach(record => {
record.data.id = null;
record.save(
{
failure: function(record, operation) {
// Toast user Add record fail!
Ext.Msg.alert(
'Errore',
'Si è verificato un errore durante la richiesta. Messaggio dal server:</br>' +
operation.error.response.responseText
);
// Remove record in case of failure
store.remove(record);
},
success: function(record, operation) {
// Toast user Add record complete
Ext.toast(
'Richiesta completata con successo, ricaricare la pagina per avere l\'id'
);
},
callback: function(record, operation, success) {
// do something whether the save succeeded or failed
}
}
); //POST /users
});
},
}
});
}




I can show, edit, remove and add items correctly, BUT if I add a new item, the id is not the ID of newly created item taken from server response, but the ID of the model, made liek "ModelName-1".
I can't use my API with this id, I need to store the model with my API integer Id.


To add a new record I extend the "editable" plugin of the grid, I post my "onSubmitTap" method:



onSubmitTap: function() {


// Get values from form
let values = this.form.getValues();


// FIXME: force expiration date is not the solution
// COMBAK: you have to create a method that read model, return the date
// keys and edit values with new formatted values.
if (values && values.hasOwnProperty('expiration_date')) {
// Get date value
let dt = values['expiration_date'];
// Format as API will
dt = Ext.Date.format(dt, 'Y-m-d');
// Set new date value into values
values['expiration_date'] = dt;
}


// FIXME: add groups empty array to create an user
// Delete me after API edit.
if (values && values.hasOwnProperty('groups')) {
// To avoid http error set an empty array because field is required
values['groups'] = [];
}


this.form.getRecord().set(values);
var newRecord = this.form.getRecord().data
newRecord.id = null;


var grid = this.getGrid()
grid.getStore().add(newRecord);
this.sheet.hide();
},


I try to log the id in different part of the code, but the only part where I can see the correct ID is inside data variable of "rootProperty" of Model declaration.
If I reload page, the request download correct data with correct ID: the problem is only when I post new model.


Where Am I wrong? Why the server id is override by the model id?
Thanks in advance.