PDA

View Full Version : EXT JS 4.1 grid Insert Operation using REST Proxy- id not visible



sarasa
9 Apr 2013, 3:43 AM
HI,

I am trying to insert a data using rest proxy in extjs 4.1
On insert i get proper response from server side with id set.
But still, in client side only datas are populated but id is null.
Only if i reload the store, i am able to see the id of the newly created item.
Could you please let me know, without reload how to set the id of newly created item on insert.

My server response:
<code>
{"success":"true","users":[{"email":"hr@abc.com","id":"11","name":"ABC"},{"email":"hr@abc.com","id":"12","name":"DEF"},{"email":"new@abc.com","id":"13","name":"new"}]}</code>

My model is:
<code>
Ext.define('NSM.model.WPPolicyModel',{
extend: 'Ext.data.Model',
fields:[
{ name: 'id', mapping: "id" },
{ name: 'email', mapping: "email" },
{ name: 'name', mapping: "name" }
]
});
</code>

My store is:
<code>
Ext.define('NSM.store.WPPolicyStore', {
extend: 'Ext.data.Store',
model: 'NSM.model.WPPolicyModel',
autoLoad: true,
autoSync: true,
autoSave:true,

proxy: {
type: 'rest',
actionMethods: {
create: 'POST',
read: 'GET', // defaults to GET
update: 'PUT',
destroy: 'DELETE'
},
api: {
read: 'http://localhost:8080/commonui/rest/policies',
update: 'http://localhost:8080/commonui/rest/policies',
create: 'http://localhost:8080/commonui/rest/policies',
destroy:'http://localhost:8080/commonui/rest/policies'
},
headers: {
'Content-Type': 'application/json'

},


reader: {
type: 'json',
root: 'users',
idProperty: 'id',
successProperty: 'success'
},
writer: {
type: 'json',
writeAlFields:true

}


}


});



</code>
My on save handler is:
<code>
saveRule: function(button) {
var win = button.up('window'),
form = win.down('form').getForm(),
values = form.getValues();
if(form.isValid()){
var record=form.getRecord(),
values=form.getValues();
if(record){
record.set(values);
this.getWpgridview().getStore().commitChanges();
}
else{


var record=Ext.create('NSM.model.WPPolicyModel');
record.set(values);
this.getWpgridview().getStore().insert(0,record );

this.getWpgridview().getStore().commitChanges();
}
}
else{
this.showAlertBox('Error','Not Valid',300,Ext.MessageBox.OK,Ext.MessageBox.Error);
}
this.getWpgridview().getStore().sync();
win.close();

}
</code>

slemmon
11 Apr 2013, 11:50 AM
I would think that the autoSync on the store would take care of the syncing of the store back to the server/DB once it sees changes are made/commited to records in the store (or if a new record is added to the store).

You might check out this example. It's a great way to see how the request should go out and how the response comes back. You can also see the effect of having autoSync turned on or off (and when off you can use the sync button to manually sync the store to the server).

*As an aside, when posting code make sure to wrap the code tag with [ ], not < >. Will make for better readibility for the community.

sarasa
16 Apr 2013, 3:18 AM
Thanks.. It worked..

slemmon
16 Apr 2013, 8:18 AM
Excellent! So, this thread can be marked 'Answered'?

mattkim
11 Nov 2013, 9:34 PM
I was also having the same issue when using a rest proxy. I fixed it by explicitly setting the reader and writer, and specifically setting the id property:



writer: { type: 'json'
},
reader: {
type: 'json',
idProperty: '_id',
messageProperty: 'message',
root: 'data'
}