Extjs4 RESTful CRUD grid with Spring Controllers - spring

Question

I am new to Extjs4 and the javascript world in general. I have looked up the documentation and samples and trying to get a basic CRUD grid up and running with my spring backend.
I have a confusion related to the proxy in extjs, are they in the store or model according to the MVC paradigm ?
I have a controller.js defined which wraps these up together.
I would have thought that the REST calls would be made accroding to the urls being specified, which it is for now , but a create call is still sending the entire list. I am using jackson at the backend for automatic conversion to java objects but somehow that is not working (for add and update only).
How do i link these all up ?
a) Add a user .. do i create a new UserModel and then invoke a rest call like so or is it automatically supported by the proxy specified in the model ?
var record = new App.model.UserModel();
store = Ext.getStore('UsersStore');
store.insert(0, record);
store.save(); // .. this invokes the /createUser method
// .. what about /update ?
b) I am using the RowEditing plugin .. how can i fetch the roweditor in my controller.js where the reference for the view is available
Thanks in advance
relevant code listings ...
//UserController.js
Ext.define('App.controller.UsersController', {
extend : 'Ext.app.Controller',
init: function() {
this.control({
'userList button[action=add]' : {
click : this.editUser
} }); },
views : ['user.List','user.Edit'],
stores : ['UsersStore'] ,
models : ['UserModel'],
editUser : function(grid,record)
{
// empty record
var record = new App.model.UserModel();
// created new record
//How to get a reference to the roweditor here and then save that to the backend ?
//store = Ext.getStore('UsersStore');
//store.insert(0, record);
//store.save();
// this.getView('user.List').getP('rowEditor').startEdit(0, 0);
}});
//List.js
var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
}
Ext.define('App.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userList',
title : 'All Users',
store : 'UsersStore',
selType: 'rowmodel',
plugins: rowEditor,
initComponent: function() {
this.columns = [
{header: 'SNo', dataIndex: 'userID', width:50},
{header: 'UID', dataIndex: 'userUID', flex: 1, editor: 'textfield', allowBlank:false},
{header: 'Name', dataIndex: 'userName', flex: 1, editor:'textfield',allowBlank:false},
{ header: 'Level', dataIndex: 'userLevel', flex: 1,
editor: {xtype: 'combobox', typeAhead: true, triggerAction: 'all', selectionOnTab:true,
store : [
['Level 1','Level 1'],
['Level 2','Level 2'],
['Level 3','Level 3']
]
}
},
{header: 'Email', dataIndex: 'emailID', flex: 1, editor: 'textfield'}
];
this.callParent(arguments);
},
dockedItems : [{
xtype : 'toolbar',
items : [{
text: 'Add',
iconCls: 'icon-add',
action: 'add'
}]
}]});
//Model.js
Ext.define('App.model.UserModel', {
extend: 'Ext.data.Model',
fields: ['userID','userUID','userName', 'userLevel' ,'emailID'],
proxy : {
type: 'ajax',
api :
{
read : 'rest/user/fetchAll',
update:'rest/user/updateUser',
create :'rest/user/createUser',
destroy : 'rest/user/deleteUser'
},
reader :
{
type : 'json',
root : 'users',
successProperty : 'success'
},
writer :
{
type : 'json',
allowSingle : 'true'
}
}});
//UserStore
Ext.define('App.store.UsersStore', {
extend: 'Ext.data.Store',
model: 'App.model.UserModel',
autoLoad : true});
//Sample Java controller
#Controller
#RequestMapping("/rest/user")
public class UserController {
#RequestMapping(value = "/fetchAll" , method= RequestMethod.GET)
public #ResponseBody Map<String,? extends Object>
fetchUsers() {
Map<String,Object> responseMap = new HashMap<String,Object>();
responseMap.put("success",true);
responseMap.put("users",userService.getUserRepository().findAll());
return responseMap; }
// was expecting a single object here ?
#RequestMapping(value = "/createUser")
public #ResponseBody Map<String,? extends Object>
createUser(#RequestBody List<User> users)
{ ... }
}

Answer 1

I would put Proxy's inside store objects, not models. But that just personal preference.
When you add record to the store object, if it has autoSync property set to true it would automatically generate create request. What exactly is happening with your create request? What is being sent?

Answer 2

After trying out Sha's comments above, i was finally able to nail the issue.
The problem is with the json reader
reader :
{
type : 'json',
root : 'users',
successProperty : 'success'
//added
idProperty : 'userID'
},
I had to add the idProperty to make Json recognize the dirty record, else it treats everything as a new record and sends back the whole list