Extjs4 RESTful CRUD grid with Spring Controllers

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) 
 {  ...   }

}

sha sha · Accepted Answer · 2012-04-09T16:57:47

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?

Extjs4 RESTful CRUD grid with Spring Controllers

2 Answers