PDA

View Full Version : Best approach to removing two json fields before ajax post in MVC extjs4.2



delebash
22 Apr 2013, 8:12 AM
I am using the example MVC application in the docs to connect to a NoSQL DB(Wakanda). I have read/update working fine, but for the create method the server expects 2 fields to not be included in the post so it knows its a new record __KEY and __STAMP. So based on a specific action either Create,Read,Update,Delete I need to modify the data differently. Looked at docs and examples but hard to follow and not sure of best practices with MVC so any help would be appreciated. Here is what am trying so far. Added listener for write event but this fires after post. Looks like maybe Writer is where I need to manipulate data but unable to find example of how to do this. These fields will always need to be removed for any Create so if it can be done in a more global manner instead of specifying in each store that would be great.

This is taken from the MVC doc example using a popup form from a grid to save data to a store and then proxy to a database via ajax using json.

Using ExtJs 4.2

Model

Ext.define('AM.model.User', {
extend : 'Ext.data.Model',
idProperty : '__KEY',
fields : ['name', 'email', '__KEY', '__STAMP']
});


Store

var crudServiceBaseUrl = "http://127.0.0.1:8081/cors/";

Ext.define('AM.store.Users', {
extend : 'Ext.data.Store',
model : 'AM.model.User',
autoLoad : true,
proxy : {
idProperty : '__KEY',
type : 'ajax',
api : {
read : crudServiceBaseUrl + 'Users',
update : crudServiceBaseUrl + 'Users/?$method=update'
},

reader : {
type : 'json',
root : '__ENTITIES',
idProperty : '__KEY'
}

},
update: function( record, operation, modifiedFieldNames, eOpts ){
debugger;
console.log("records");
},
onCreateRecords: function(records, operation, success) {
console.log(records);
},

onUpdateRecords: function(records, operation, success) {
// debugger;
// console.log(records);
},

onDestroyRecords: function(records, operation, success) {
console.log(records);
},
listeners: {
update: function(store, record, operation, eOpts ) {
switch(operation) {
case Ext.data.Model.EDIT:
console.log('INFO', 'Updating record...');
break;
case Ext.data.Model.COMMIT:
console.log('INFO', 'Record was updated!');
break;
case Ext.data.Model.REJECT:
console.log('ERR', 'Something went horribly wrong :( Data was rejected!');
break;
}
},
beforesync: function(options, eOpts ){
debugger;
}
}
// listeners : {
// write : function(store, action, result, res, rs) {
// debugger;
// console.log('WRITE', arguments);
// }
// },
})

View

Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.useredit',

title: 'Edit User',
layout: 'fit',
autoShow: true,

initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];

this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];

this.callParent(arguments);
}
});

Read request returns Json which parses on __ENTITIES


{"__entityModel":"Users","__COUNT":2,"__SENT":2,"__FIRST":0,"__ENTITIES":[{"__KEY":"1","__STAMP":24,"ID":1,"name":"ddd","email":"a"},{"__KEY":"2","__STAMP":2,"ID":2,"name":"a","email":"a"}]}


Create request should be just

{"name":"test","email":"green"}

Oh in the code I am using Update function to try and manipulate the json data just because that is currently working, but once I find out how to manipulate data before post I will move it to the Create function

Thanks, Dan

existdissolve
22 Apr 2013, 6:02 PM
You could implement overridden version of getRecordData() in your writer to customize the data anyway you need to before it is sent to the server:

http://docs.sencha.com/extjs/4.2.0/source/Writer.html#Ext-data-writer-Writer-method-getRecordData

delebash
23 Apr 2013, 4:03 AM
Thanks, that is exactly what I did

writer : {
type : 'json',
writeAllFields : false,
getRecordData : function(record, operation) {
switch(operation.action) {
case 'create':
console.log('INFO', 'Create');
delete record.data.__KEY
delete record.data.__STAMP
return record.data
break;
case 'update':
console.log('INFO', 'Updating');
var myrecord = record.getChanges();
myrecord.__KEY = record.data.__KEY
myrecord.__STAMP = record.data.__STAMP
return myrecord
break;
}
},