View Full Version : Restful Grid, get updated rows from the server

4 Jan 2011, 11:05 PM
Dear experts,

I have just successfully created a restful grid doing CRUD operations (server: galssfish with jersey and jpa, db: mysql). I'm just glad to have just completed trying to get it work for complex records (objects inside objects).

The challege I am facing now is how to update the record in the grid in a reverse manner. I noticed the behavior that when I change the data in the row (for editable grid), it will send the changes to the server and my server will persist the changes. How about the other way around? Like a refresh button that will update the record with the changes from the server? Reloading all the data is easy but I currently have no idea how to reload just one.

What i understand of the rest is:
1. Load the store results to a http GET (in most cases it is a get all)
2. Create new record results to http POST
3. Update a record results http PUT
4. Delete a record result to http DELETE

Im sorry if my question is a bit stupid trying to do a row refresh which is not related to CRUD operations.

My codes below:


Ext.data.ClientJsonWriter = function(config){

Ext.data.ClientJsonWriter.superclass.constructor.call(this, config);


Ext.extend(Ext.data.ClientJsonWriter, Ext.data.JsonWriter, {

render : function(params, baseParams, data){

if(this.encode == true){
Ext.apply(params, baseParams);
params[this.meta.root] = Ext.encode(data);
} else {
var jdata = Ext.apply({}, baseParams);
var newData = {
name : data.name,
contactPerson : {
firstname : data['contactPerson.firstname'],
lastname : data['contactPerson.lastname'],
phoneNo : data['contactPerson.phoneNo'],
homePhone : data['contactPerson.homePhone'],
email : data['contactPerson.email']
address : {
block : data['address.block'],
level : data['address.level'],
unit : data['address.unit'],
street : data['address.street'],
country : data['address.country']
jdata = Ext.apply(jdata, newData);
params.jsonData = jdata;


var App = new Ext.App({});

var proxy = new Ext.data.HttpProxy({
url: 'rest/clients'


var reader = new Ext.data.JsonReader({
totalProperty: 'total',

successProperty: 'success',

idProperty: 'id',
root: 'client',
fields: [
{name: 'id'},
{name: 'name', allowBlank: false},
{name: 'firstname', mapping: 'contactPerson.firstname', allowBlank: false},
{name: 'lastname', mapping: 'contactPerson.lastname', allowBlank: false},
{name: 'phoneNo', mapping: 'contactPerson.phoneNo', allowBlank: false},
{name: 'homePhone', mapping: 'contactPerson.homePhone', allowBlank: true},
{name: 'email', mapping: 'contactPerson.email', allowBlank: false},
{name: 'block', mapping: 'address.block', allowBlank: false},
{name: 'level', mapping: 'address.level', allowBlank: true},
{name: 'unit', mapping: 'address.unit', allowBlank: true},
{name: 'street', mapping: 'address.street', allowBlank: false},
{name: 'country', mapping: 'address.country', allowBlank: false}

var writer = new Ext.data.ClientJsonWriter({
encode: false, writeAllFields: true


var store = new Ext.data.Store({
id: 'client',

restful: true, // <-- This Store is RESTful

proxy: proxy,
reader: reader,
writer: writer


9 Jan 2011, 7:50 PM
Alright I found it.

var tmpRec = {<data here...>};

store.loadData(tmpRec , true);

This is code is just what I needed, to add a record into the store without trigerring a 'POST'. But... the new record inserted is appended which is the default behavior. I'm wondering if there is a way to insert it at index 0. Anyone who has an idea please?

9 Jan 2011, 10:02 PM
Surprisingly this hack works. But I don't know whether this is efficient.

var tmpRecs = {records:store.getRange(0, store.getCount())};
var tmpRec = {<new Data>};
store.loadData(tmpRec , false);
store.loadRecords(tmpRecs , {add: true}, true);